其他分享
首页 > 其他分享> > slot插槽

slot插槽

作者:互联网

插槽,也就是槽,是组件的一块HTML模板,这块模板显示不显示,以及怎样显示由父组件来决定。
插槽分为:匿名插槽| 具名插槽| 作用域插槽
1、匿名插槽
它不用设置名称属性,可以放置在组件的任意位置;可以理解为父传入样式及内容,子负责展示
index.vue 父组件

slot2.vue   子组件 2、具名插槽 插槽加了名称属性,就变成了具名插槽。具名插槽可以在一个组件中出现Ñ次,出现在不同的位置 index.vue 父组件  

具名插槽n1

     

具名插槽n2

  • {{v}}
 
slot2.vue   子组件 3、作用域插槽 官方叫它作用域插槽,实际上,对比前面两种插槽,我们可以叫它带数据的插槽。 什么意思呢,就是前面两种,都是在组件的模板里面写 作用域插槽跟单个插槽和具名插槽的区别,因为单个插槽和具名插槽不绑定数据,所以父组件提供的模 板一般要既包括样式又包括内容, 而作用域插槽,父组件只需要提供一套样式(在确实用作用域插槽绑 定的数据的前提下)相当于父组件提供一套样式,数据都是子组件的。 index.vue 父组件     {{scope.title}}   slot2.vue   子组件 子组件中传入数组 index.vue 父组件  
  • {{v}}
 

标签:slot,index,vue,作用域,插槽,具名,组件
来源: https://www.cnblogs.com/jycom/p/16615547.html