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>