Vue中的匿名插槽與具名插槽是什么

這篇文章將為大家詳細講解有關Vue中的匿名插槽與具名插槽是什么，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

slot又名插槽，是Vue的內容分發機制，組件內部的模板引擎使用slot元素作為承載分發內容的出口。

插槽slot是子組件的一個模板標簽元素，而這一個標簽元素是否顯示，以及怎么顯示是由父組件決定的。

slot又分三類，默認插槽，具名插槽和作用域插槽。（這里說前兩種）

插槽的實質是：插槽實質是對子組件的擴展，通過<slot>插槽-----向組件內部“指定位置”傳遞內容。

1.匿名插槽

默認插槽：又名匿名插槽，當slot沒有指定name屬性值的時候一個默認顯示插槽，一個組件內只有有一個匿名插槽。

舉例：

先創建一個Vue實例，掛載到id為app的div上面

<div id="app">
 
    </div>
 
    <script src="./js/vue.js"></script>
    <script>
 
        // 根組件（父組件，又叫基組件）
        let vm = new Vue({
            el:'#app',
        })
    </script>

在創建一個局部組件，在組件中定義好插槽，插槽一定要放在子組件中

 // 申明局部組件
        let child = {
            template:`
            <div>
                <p>我是子組件</p>
                <p>我是一行話</p>
                <slot>這是占位的內容</slot>
            </div>
            `
        }

在vm實例中的子組件中心定義好局部組件，并在視圖層渲染

  // 根組件（父組件，又叫基組件）
        let vm = new Vue({
            el:'#app',
 
            // 子組件們(注冊中心)
            components:{
                // 鍵值對，當鍵和值相同可以省略
                child
            }
        })

<div id="app">
 
        <!-- 使用組件 -->
        <child></child>
    </div>

沒有內容傳遞過去的時候,會顯示插槽的(默認)內容

我們在視圖層里向插槽內傳遞內容:

 <!-- 使用組件 -->
        <child>
            <h2 >這是一個內容</h2>
        </child>

有內容傳遞過去的時候,不會顯示插槽的(默認)內容。

注意：要在視圖層向插槽內傳遞內容時，必須在子組件中有插槽，否則不會顯示！

當你在子組件中有多個匿名插槽時，傳遞的內容會分別放入各個插槽中：

 template:`
            <div>
                <p>我是子組件</p>
                <p>我是一行話</p>
                <slot>這是占位的內容</slot>
                <slot></slot>
                <slot></slot>
            </div>
            `

<child>
            <h2 >這是第一個內容</h2>
            <h2 >這第二個內容</h2>
        </child>

2.具名插槽

在子組件中定義插槽時，給對應的插槽分別起個名字，方便后邊插入父組件將內容根據name來填充對應的內容。

先在子組件中給插槽起好名字(匿名插槽其實也有個默認的名字，default，可以省略不寫)：

 template:`
            <div>
                <p>我是子組件</p>
                <p>我是一行話</p>
                <slot name="default">這是占位的內容</slot>
                <slot name="t1">這是t1占位的內容</slot>
                <slot name="t2">這是t2占位的內容</slot>
                <slot name="t3">這是t3占位的內容</slot>
                <slot name="t5">這是t4占位的內容</slot>
            </div>
            `,

使用具名插槽的方法

1.在子組件中要先定義好插槽，并起好名字

 2.在父組件中的視圖層中，某個標簽上，給這個標簽添加slot屬性

這個屬性賦值上具體插槽的名字即可

 <child>
            <!-- 此時這兩句話還是放在匿名插槽中 -->
            <h2 >這是第一個內容</h2>
            <h2 >這第二個內容</h2>
 
                <!-- slot="t1"  指定把內容放在那個插槽里 -->
            <h3  slot="t1">我要放在具名插槽t1里使用</h3>
            <h4  slot="t2">我要放在具名插槽t2里使用</h4>
            <h5  slot="t3">我要放在具名插槽t3里使用</h5>
            <h6  slot="t4">我要放在具名插槽t4里使用</h6>
        </child>

關于“Vue中的匿名插槽與具名插槽是什么”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。