Vue中的插槽是什么-創(chuàng)新互聯(lián)

這篇文章主要介紹了Vue中的插槽是什么，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)公司自2013年創(chuàng)立以來，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢想脫穎而出為使命，1280元淮安區(qū)做網(wǎng)站,已為上家服務(wù),為淮安區(qū)各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:13518219792

Vue插槽，是學(xué)習(xí)vue中必不可少的一節(jié)，當(dāng)初剛接觸vue的時(shí)候，對(duì)這些掌握的一知半解，特別是作用域插槽一直沒明白。

后面越來越發(fā)現(xiàn)插槽的好用。

分享一下插槽的一些知識(shí)吧。

一、插槽內(nèi)容

一句話：插槽內(nèi)可以是任意內(nèi)容。

先看一下下面的代碼：聲明一個(gè)child-component組件，

如果現(xiàn)在我想在<child-component></child-component>內(nèi)放置一些內(nèi)容，結(jié)果會(huì)是怎樣？

<div id="app">
    <child-component></child-component>

</div>
<script>
    Vue.component('child-component',{
        template:`
            <div>Hello,World!</div>
        `
    })
    let vm = new Vue({
        el:'#app',
        data:{

        }
    })
</script>

<child-component>你好</child-component>

輸出內(nèi)容還是在組件中的內(nèi)容，在 <child-component>內(nèi)寫的內(nèi)容沒起作用。

我們現(xiàn)在給組件增加一個(gè)<slot></slot>插槽

我們?cè)?lt;child-component></child-component>內(nèi)寫的"你好"起作用了?。?！

Vue.component('child-component',{
        template:`
            <div>
            Hello,World!
            <slot></slot>
            </div>
        `
    })

到現(xiàn)在，我們知道了什么是插槽：

插槽就是Vue實(shí)現(xiàn)的一套內(nèi)容分發(fā)的API，將<slot></slot>元素作為承載分發(fā)內(nèi)容的出口。

這句話的意思就是，沒有插槽的情況下在組件標(biāo)簽內(nèi)些一些內(nèi)容是不起任何作用的，當(dāng)我在組件中聲明了slot元素后，在組件元素內(nèi)寫的內(nèi)容就會(huì)跑到它這里了！

二、具名插槽

具名插槽，就是給這個(gè)插槽起個(gè)名字

在組件中，我給插槽起個(gè)名字，一個(gè)名字叫"girl"，一個(gè)名字叫"boy"，還有一個(gè)不起名字。

然后再<child-component></child-component>內(nèi)，slot屬性對(duì)應(yīng)的內(nèi)容都會(huì)和組件中name一一對(duì)應(yīng)。

而沒有名字的，就是默認(rèn)插槽！！

<div id="app">
    <child-component>
        <template slot="girl">
            漂亮、美麗、購物、逛街
        </template>
        <template slot="boy">
            帥氣、才實(shí)
        </template>
        <div>
            我是一類人，
            我是默認(rèn)的插槽
        </div>
    </child-component>
</div>
<script>
    Vue.component('child-component',{
        template:`
            <div>
            <h5>這個(gè)世界不僅有男人和女人</h5>

            <slot name="girl"></slot>

            <div style="height:1px;background-color:red;"></div>

            <slot name="boy"></slot>

            <div style="height:1px;background-color:red;"></div>

            <slot></slot>
            </div>
        `
    })
    let vm = new Vue({
        el:'#app',
        data:{

        }
    })
</script>

3、作用域插槽

之前一直沒搞懂作用域插槽到底是什么?。?！

說白了就是我在組件上的屬性，可以在組件元素內(nèi)使用！

先看一個(gè)最簡單的例子！！

我們給<slot></slot>元素上定義一個(gè)屬性say（隨便定義的?。酉聛碓谑褂媒M件child，然后在template元素上添加屬性slot-scope?。‰S便起個(gè)名字a

我們把a(bǔ)打印一下發(fā)現(xiàn)是 {"say" : "你好"}，也就是slot上面的屬性和值組成的鍵值對(duì)！??！

這就是作用域插槽！

我可以把組件上的屬性/值，在組件元素上使用?。?/p>

<div id="app">
    <child>
        <template slot-scope="a">
　　　　　　<!-- {"say":"你好"} -->

            {{a}}
        </template>
    </child>
</div>
<script>
    Vue.component('child',{
        template:`
            <div>
                <slot say="你好"></slot>
            </div>
        `
    })

    let vm = new Vue({
        el:'#app',
        data:{

        }
    })
</script>

再看一下下面的例子：

<div id="app">
    <child :lists="nameList">
        <template slot-scope="a">
            {{a}}
        </template>
    </child>
</div>
<script>
    Vue.component('child',{
        props:['lists'],
        template:`
            <div>
                <ul>
                    <li v-for="list in lists">
                        <slot :bbbbb="list"></slot>
                    </li>
                </ul>
            </div>
        `
    })

    let vm = new Vue({
        el:'#app',
        data:{
            nameList:[
            {id:1,name:'孫悟空'},
            {id:2,name:'豬八戒'},
            {id:3,name:'沙和尚'},
            {id:4,name:'唐僧'},
            {id:5,name:'小白龍'},
            ]
        }
    })
</script>

看一下輸出結(jié)果

以上就是了解一下Vue中的插槽的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注創(chuàng)新互聯(lián)其它相關(guān)文章！

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Vue中的插槽是什么”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!

網(wǎng)站欄目：Vue中的插槽是什么-創(chuàng)新互聯(lián)
本文鏈接：http://muchs.cn/article26/cdsejg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、云服務(wù)器、網(wǎng)站制作、微信公眾號(hào)、定制網(wǎng)站、App設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)