快捷導(dǎo)航

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

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

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

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

先拋例程：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>組件之通過插槽(slot)分發(fā)內(nèi)容</title>
    <script src="你的vue地址，請下載最新版的"></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.你是誰啊，我認(rèn)識你嗎</test-slot>
        <test-slot>
            Something bad happened.
            <!--允許使用變量，但該變量必須是本作用域的才會生效，這里name的值將會是"岔道口"-->
            <h3>標(biāo)題{{name}}</h3>
            <img src="img/flower.jfif" alt="圖片無法顯示">
        
        </test-slot>
        <!--2、具名插槽 slo有一個特殊的屬性name,可以使插槽具名-->
        <slot-name>
            <h3>勸學(xué)</h3>
            <p>少壯不努力，老大徒傷悲</p>
            <p>光陰似箭，日月如梭</p>
            <template slot="header">
                <ul >
                    <li>主頁</li>
                    <li>關(guān)于時間</li>
                    <li>關(guān)于人生</li>
                    <li>關(guān)于未來</li>
                </ul>
            </template>
            <p>你好啊</p>
            <p slot="footer">
                <p>結(jié)尾</p>
                <p>粵ICP備6545646456415</p>
            </p>
        </slot-name>
        
        <!--使用作用域插槽，通過slot-scope實現(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)語法-->
        <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>

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

<test-slot>

          Something bad happened.

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

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

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

</test-slot>

這是我上面的例子，也就是說這里name必須是當(dāng)前組件里的，不能是test-slot這個組件內(nèi)部的數(shù)據(jù)，這是它作用域限制，name這個數(shù)據(jù)屬于父組件的作用域，所以只能是父組件的數(shù)據(jù)。但是slot-scope的出現(xiàn)卻實現(xiàn)了父組件調(diào)用子組件內(nèi)部的數(shù)據(jù)，子組件的數(shù)據(jù)通過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這個數(shù)據(jù)傳給了父組件
                <slot :data="todo">{{todo.text}}</slot>//todo.text是默認(rèn)值，父組件會把它覆蓋掉
            </li>
         </ul>
        `
    });

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

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

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特性，那么他有什么運用場景呢？我們可以試想一下，別人寫好了一個組件，該組件已經(jīng)封裝好了，但他覺得，數(shù)據(jù)的顯示風(fēng)格讓用戶自己定義，就像我們上面，我們希望列表的樣式由用戶定義，比如我就加了一個√號。一開始最初的數(shù)據(jù)是我們傳進(jìn)去的，但數(shù)據(jù)必須進(jìn)過子組件處理后，寫組件那個人肯定希望顯示的是處理后的數(shù)據(jù)。這時候slot-scope就無比重要了。

總結(jié)

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

您可能感興趣的文章: