插槽(slot)的简单介绍和作用域

554 阅读1分钟

使用slot分发内容

什么是slot(插槽)

为了让组件可以组合,我们需要一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为内容分发,Vue.js实现了一个内容分发API,使用特殊的‘slot’元素作为原始内容的插槽。

编译的作用域

在深入内容分发API之前,我们先明确内容在哪个作用域里编译。假定模板为:

<child-component>
{{message}}
</child-component>

message 应该绑定到父组件的数据,还是绑定到子组件的数据? 答案是父组件,组件作用域简单的说是: 父组件模板的内容在父组件作用域内编译; 子组件模板的内容在子组件作用域内编译。

单个插槽的用法

image.png

image.png 页面显示

image.png

具名插槽的用法(具体名字)

作用域插槽

image.png

image.png

image.png name里面的内容拿不到。

image.png