Vue slot插槽

插槽用於內容分發，存在於子組件之中。

插槽作用域

父級組件作用域為父級，子級組件作用域為子級，在哪定義的作用域就在哪。

子組件之間的內容是在父級作用域的，無法直接訪問子組件裡面的數據。

插槽元素

<slot></slot> 或 <slot name="名稱">預設值</slot>

1：如果定義了slot插槽元素，那麼子組件之間的內容將會被插入到插槽元素之中。（可簡單理解為向插槽提供內容）
2：如果定義了slot插槽元素，並沒有在子組件之間插入內容，那麼將使用預設值。（不提供內容，將使用預設值）
3：如果沒有定義slot元素，那麼子組件之間的內容將會被廢棄。

// 定義組件
Vue.component("my-test",{
    template:`<div><slot>預設值</slot></div>`
})

// 向插槽提供內空
<my-test>hello slot</my-test>
    

多插槽元素

當子組件中有多個插槽元素時，要為每個插槽name特性定義名稱。

1：如果沒有定義名稱，那麼採用預設名稱：default；用於存放不指定名稱的內容

2：如果多個插槽沒有定義名稱或名稱相同的情況下，那麼v-slot（# 縮寫）指令將無法找到對應插槽或混亂。

3：多個插槽時v-slot指令配合template一起使用，如果只有單個可直接寫到子組件上。

// 定義插槽
    Vue.component("my-test",{
        template:`
        <div>
             <div class="title"><slot name="name">標題</slot></div>
             <div class="main"><slot>內容</slot></div>
             <div class="main"><slot name="qita">其它</slot></div>
        </div>
    `
    });

<!-- 向插槽提供數據 -->
    <div class="app">
        <my-test>
            <template v-slot:name>
                <h4>vuejs</h4>
            </template>
            <p>v-slot、slot元素</p>
            <p>template</p>
            <template v-slot:qita>
                <p>恩</p>
            </template>
        </my-test>
    </div>

訪問插槽數據

父組件在向子組件的插槽提供內容的時候，有時需要訪問子組件中的數據，那麼可以利用v-bind指令在插槽上綁定變數來實現。

字面量寫法：

v-slot:default="自定義名稱"

解構寫法 : 與ES6中解構對象寫法一樣。

v-slot:default="{data = {name:"whowhowho"}}"

變數重命名

v-slot:default="{data : ddd}"

   Vue.component("my-test",{
        template:`<div class="main"><slot :data="user">內容</slot></div>`,
        data(){
            return {
                user:{
                    name:'小明',
                    age:'110'
                }
            }
        }
    });

    <div class="app">
        <my-test>
            <template v-slot="o">
                {{o.data.name}}、{{o.data.age}}
            </template>
        </my-test>
        <my-test>
            <template v-slot:default="{data}">
                {{data.name}}、{{data.age}}
            </template>
        </my-test>
        <my-test>
            <template v-slot:default="{data:dd}">
                {{dd.name}}、{{dd.age}}
            </template>
        </my-test>
    </div>

動態插槽名

與ES6中動態屬性名寫法一樣。 v-slot:[....]