快捷導(dǎo)航

Vue中slot-scope的深入理解（適合初學(xué)者）

更新時(shí)間：2021年04月17日 14:40:14 作者：perryhuan9

這篇文章主要給大家介紹了關(guān)于Vue中slot-scope的深入理解，這個(gè)教程非常適合初學(xué)者,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

百度上已經(jīng)有很多的關(guān)于slot-scope的文章，但我感覺(jué)都是那些以前沒(méi)學(xué)好，又回頭學(xué)的人，他們都使用了.Vue文件，我覺(jué)得有點(diǎn)不適合初學(xué)者，所以我就寫(xiě)一篇適合初學(xué)者的。

先拋例程：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>組件之通過(guò)插槽(slot)分發(fā)內(nèi)容</title>
    <script src="你的vue地址，請(qǐng)下載最新版的"></script>
    <script>
        Vue.component("test-slot",{
           // 插槽允許有默認(rèn)內(nèi)容
           template:
               `<div>
                    <strong>Error!</strong>
                    <slot></slot>
                </div>
               `,
            data:function () {
                return {
                    name:"perry"
                }
            }
        });
    //    具名插槽
        Vue.component("slot-name",{
           template:
               `<div>
                      <header>
                            <slot name="header"></slot>
                      </header>
                     <main>
                        <slot ></slot>
                     </main>
                     <footer>
                        <slot name="footer"></slot>
                     </footer>
 
                </div>
               `
        });
        
    //    作用域插槽
        Vue.component("todo-list",{
            inheritAttrs:false,
            props:{
                todos:[Array,Object]
            },
            template:
            `<ul>
                <li v-for="todo in todos" :key="todo.id" style="display: block;" >
                    <slot :data="todo">{{todo.text}}</slot>
                </li>
             </ul>
            `
        });
                
    </script>
    
    <style>
        li{
            list-style: none;
            display: inline-block;
            font-size: 25px;
        }
    </style>
</head>
<body>
    <div id="app">
        <!--1、插槽內(nèi)容  slot可以接收任何內(nèi)容、代碼，包括組件-->
        <test-slot>Something bad happened.你是誰(shuí)啊，我認(rèn)識(shí)你嗎</test-slot>
        <test-slot>
            Something bad happened.
            <!--允許使用變量，但該變量必須是本作用域的才會(huì)生效，這里name的值將會(huì)是"岔道口"-->
            <h3>標(biāo)題{{name}}</h3>
            <img src="img/flower.jfif" alt="圖片無(wú)法顯示">
        
        </test-slot>
        <!--2、具名插槽 slo有一個(gè)特殊的屬性name,可以使插槽具名-->
        <slot-name>
            <h3>勸學(xué)</h3>
            <p>少壯不努力，老大徒傷悲</p>
            <p>光陰似箭，日月如梭</p>
            <template slot="header">
                <ul >
                    <li>主頁(yè)</li>
                    <li>關(guān)于時(shí)間</li>
                    <li>關(guān)于人生</li>
                    <li>關(guān)于未來(lái)</li>
                </ul>
            </template>
            <p>你好啊</p>
            <p slot="footer">
                <p>結(jié)尾</p>
                <p>粵ICP備6545646456415</p>
            </p>
        </slot-name>
        
        <!--使用作用域插槽，通過(guò)slot-scope實(shí)現(xiàn)-->
        <todo-list :todos="todos">
            <template slot-scope="slotProps">
                <span v-if="slotProps.data.isTrue">√</span>
                {{slotProps.data.text}}
            </template>
        </todo-list>
        
        <!--使用ES2015結(jié)構(gòu)語(yǔ)法-->
        <todo-list :todos="todos">
            <template slot-scope="{data}">
                <span v-if="data.isTrue">√</span>
                {{data.text}}
            </template>
        </todo-list>        
    </div>
        
    <script>
        new Vue({
            el:"#app",
            data:{
                name:"岔道口",
                todos:[
                    {text:"A",id:1,isTrue:true},
                    {text:"B",id:2,isTrue:true},
                    {text:"C",id:3,isTrue:false},
                    {text:"D",id:4,isTrue:true},
                ],
                // slotProps:""
            }
        })
        
    </script>
</body>
</html>

例程中也寫(xiě)了普通插槽和具名插槽，這個(gè)我就不說(shuō)，我就說(shuō)一下作用域插槽。首先從“作用域插槽“”這個(gè)名字說(shuō)起，本來(lái)你父組件的模板是無(wú)法使用到子組件模板中的數(shù)據(jù)，官網(wǎng)中有一句特別強(qiáng)調(diào)的話：父組件模板的所有東西都會(huì)在父級(jí)作用域內(nèi)編譯；子組件模板的所有東西都會(huì)在子級(jí)作用域內(nèi)編譯。這句話其實(shí)挺難理解，舉個(gè)例子就知道了，

<test-slot>

          Something bad happened.

         <!--允許使用變量，但該變量必須是本作用域的才會(huì)生效，這里name的值將會(huì)是"岔道口"-->

           <h3>標(biāo)題{{name}}</h3>

           <img src="img/flower.jfif" alt="圖片無(wú)法顯示">

</test-slot>

這是我上面的例子，也就是說(shuō)這里name必須是當(dāng)前組件里的，不能是test-slot這個(gè)組件內(nèi)部的數(shù)據(jù)，這是它作用域限制，name這個(gè)數(shù)據(jù)屬于父組件的作用域，所以只能是父組件的數(shù)據(jù)。但是slot-scope的出現(xiàn)卻實(shí)現(xiàn)了父組件調(diào)用子組件內(nèi)部的數(shù)據(jù)，子組件的數(shù)據(jù)通過(guò)slot-scope屬性傳遞到了父組件

//    作用域插槽
    Vue.component("todo-list",{
        inheritAttrs:false,
        props:{
            todos:[Array,Object]
        },
        template:
        `<ul>
            <li v-for="todo in todos" :key="todo.id" style="display: block;" >
                  //這里的：data=“todo”就是講子組件todo這個(gè)數(shù)據(jù)傳給了父組件
                <slot :data="todo">{{todo.text}}</slot>//todo.text是默認(rèn)值，父組件會(huì)把它覆蓋掉
            </li>
         </ul>
        `
    });

<!--使用作用域插槽，通過(guò)slot-scope實(shí)現(xiàn)-->
<todo-list :todos="todos">
    <template slot-scope="slotProps">
        <span v-if="slotProps.data.isTrue">√</span>
        {{slotProps.data.text}}
    </template>
</todo-list>

使用的時(shí)候就是這樣，從子組件傳過(guò)來(lái)的名為data值為todo的數(shù)據(jù)將會(huì)被slot-scope接收，需要注意的是，slot-scope接收的是一個(gè)對(duì)象，這里命名為slotProps，也就是說(shuō)你傳過(guò)來(lái)的data將會(huì)作為slotProps的一個(gè)屬性，所以需要slotProps.data才能調(diào)用到data。前面說(shuō)了，data的值為todo，todo是什么呢？todo是todos遍歷出來(lái)的，所以是一個(gè)對(duì)象。

new Vue({
    el:"#app",
    data:{
        name:"岔道口",
        todos:[
            {text:"A",id:1,isTrue:true},
            {text:"B",id:2,isTrue:true},
            {text:"C",id:3,isTrue:false},
            {text:"D",id:4,isTrue:true},
        ],
        // slotProps:""
    }
})；

我們已經(jīng)理解了slot-scope特性，那么他有什么運(yùn)用場(chǎng)景呢？我們可以試想一下，別人寫(xiě)好了一個(gè)組件，該組件已經(jīng)封裝好了，但他覺(jué)得，數(shù)據(jù)的顯示風(fēng)格讓用戶自己定義，就像我們上面，我們希望列表的樣式由用戶定義，比如我就加了一個(gè)√號(hào)。一開(kāi)始最初的數(shù)據(jù)是我們傳進(jìn)去的，但數(shù)據(jù)必須進(jìn)過(guò)子組件處理后，寫(xiě)組件那個(gè)人肯定希望顯示的是處理后的數(shù)據(jù)。這時(shí)候slot-scope就無(wú)比重要了。

總結(jié)

到此這篇關(guān)于Vue中slot-scope深入理解的文章就介紹到這了,更多相關(guān)Vue slot-scope理解內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: