slot 内容分发:为了让组件可以组合,我们需要一种方式来混合父组件的内容与子组件自己的模板。
比如我们遇到组件需要相互嵌套这样的情况:
App.vue 文件
Hello.vue 文件
我是 hello 组件
那这么直接写是肯定只显示
所以就需要用到 slot 插口,否则该组件标签中的内容将会被丢弃
一、 单个插槽只需要在 Hello.vue 文件内写入
我是 hello 组件此处可自定义内容,如果该组件的标签内没有内容,则显示此内容
二、多个插槽注意:
标签内是可以自定义内容的,如果在调用的 标签内没有写入任何内容,则显示 标签内的自定义内容,否则显示在调用的 标签内写入的内容
假如我们想要改变
App.vue 文件
我是备用插槽内部显示的内容
Hello.vue 文件
我是 hello 组件
最后渲染显示为
在子组件中,slot 插槽还可以用作传递数据,类似于用 prop 来传递数据
在子组件 Hello.vue 中,只需要将需要传递的内容写入插槽中
我是 hello 组件
{ text:'我是hello',
text1:'组件的数据'}在 App.vue 中调用 Hello 组件时,通过在 template 中写入 slot-scope 特殊属性来获取数据
{{hello.text}} + {{hello.text1}}
注意:在 vue 2.5.0以上版本,就不需要用到 template 模板了,slot-scope 可以作用在任意元素中
被渲染的结果为:
在 App.vue 组件内
{{ bbb.text }}
在 Hello.vue 组件中
渲染结果为:



