插槽,也就是槽,是组件的一块HTML模板,这块模板显示不显示,以及怎样显示由父组件来决定。
插槽分为:匿名插槽| 具名插槽| 作用域插槽
1、匿名插槽
它不用设置名称属性,可以放置在组件的任意位置;可以理解为父传入样式及内容,子负责展示
index.vue 父组件
slot2.vue 子组件
2、具名插槽
插槽加了名称属性,就变成了具名插槽。具名插槽可以在一个组件中出现Ñ次,出现在不同的位置
index.vue 父组件
具名插槽n1
具名插槽n2
slot2.vue 子组件
3、作用域插槽
官方叫它作用域插槽,实际上,对比前面两种插槽,我们可以叫它带数据的插槽。
什么意思呢,就是前面两种,都是在组件的模板里面写
作用域插槽跟单个插槽和具名插槽的区别,因为单个插槽和具名插槽不绑定数据,所以父组件提供的模
板一般要既包括样式又包括内容, 而作用域插槽,父组件只需要提供一套样式(在确实用作用域插槽绑
定的数据的前提下)相当于父组件提供一套样式,数据都是子组件的。
index.vue 父组件
{{scope.title}}
slot2.vue 子组件
子组件中传入数组
index.vue 父组件
标签:slot,index,vue,作用域,插槽,具名,组件
来源: https://www.cnblogs.com/jycom/p/16615547.html