Vue中的匿名插槽與具名插槽詳解

阿新 • • 發佈：2021-12-10

1.匿名插槽

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

舉例：

先建立一個Vue例項，掛載到id為app的div上IpjrouIR

面

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

在建立一個區域性元件，在元件中定義好插槽，插槽一定要放在子元件中

 // 申明區域性元件
        let child = {
            template:`
            <div>
         www.cppcns.com 
       <p>我是子元件</p>
                <p>我是一行話</p>
                <slot>這是佔位的內容</slot>
            </div>
            `
        }

在vm例項中的子元件中心定義好區域性元件，並在檢視層渲染

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

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

Vue中的匿名插槽與具名插槽詳解

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

我們在檢視層裡向插槽內傳遞內容:

 <!-- 使用元件 -->
        <child>
            <h1 style="color: aqua;">這是一個內容</h1>
        </child>

Vue中的匿名插槽與具名插槽詳解

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

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

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

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

<child>
            <h1 style="color: aqua;">這是第一個內容</h1>
            <h1 style="color: red;">這第二個內容</h1>
        </child>

Vue中的匿名插槽與具名插槽詳解

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>
            `,

Vue中的匿名插槽與具名插槽詳解

使用具名插槽的方法

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

2.在父元件中的檢視層中，某個標籤上，給這個標籤新增slot屬性

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

 <child>
            <!-- 此時這兩句話還是放在匿名插槽中 -->
            <h1 style="color: aqua;">這是第一個內容</h1>
            <h1 style="color: red;">這第二個內容</h1>
 
                <!-- slot="t1"  指定把內容放在那個插槽裡 -->
            <h2 style="color: blue;" slot="t1">我要放在具名插槽t1裡使用</h2>
            <h3 style="color: green;" slot="t2">我要放在具名插槽t2裡使用</h3>
            <h4 style="color: orange;" slot="t3">我要放在具名插槽t3裡使用</h4>
            <h5 style="color: pink;" slot="t4">我要放在具名插槽t4裡使用</h5>
        </child>

Vue中的匿名插槽與具名插槽詳解