vue插槽(slot)原理與用法詳解(一)

Vue 實現了一套內容分發的 API，這套 API 的設計靈感源自 Web Components 規范草案，將 <slot> 元素作為承載分發內容的出口。

slot插槽內可以使用任何模板，甚至可以包含html和其他組件

1.基礎用法

父組件home.vue，

<popup v-bind:title="'新增'">
   <div style="color: #FFFFFF;">
    <p>使用方式</p>
    <p>替代子組件中slot標簽里的內容</p>
   </div>
</popup>

子組件popup.vue

<div class="popup-box flex-center-middle">
    <div class="popup">
        <div class="p-title flex-between">
            <span class="title text-color-A2EDFF">{{title}}</span>
            <span class="icon iconfont icon-guanbi text-color-A2EDFF"></span>
        </div>
        <div class="p-content">
            <slot></slot>
        </div>
    </div>
</div>

 

 

 注意，如果 <popup> 的 template 中沒有包含一個 <slot> 元素，則該組件起始標簽和結束標簽之間的任何內容都會被拋棄。在頁面中渲染不出來

2.編譯作用域

如果在插槽中使用數據的時候，數據是在父級模板中編譯，即父級模板里的所有內容都是在父級作用域中編譯的；子模板里的所有內容都是在子作用域中編譯的。

home.vue

<popup v-bind:title="'新增'">
    <div style="color: #FFFFFF;">
        {{message}}//在父組件home.vue文件中定義

    </div>
</popup>

如果變量message放在popup組件中定義，則會出現ReferenceError: message is not defined這個錯誤

3.后備內容（其實也就是默認內容）

可以將slot標簽中設置默認內容，在父組件home.vue文件中的popup標簽內沒有提供內容的時候會顯示默認內容

//home.vue
<popup v-bind:title="'新增'">
</popup>

　　

//子組件popup.vue
<div class="p-content">
    <slot>默認內容</slot>
</div>