Vue2 插槽

插槽的基本概念: 是组件的一块HTML模板

由于插槽是一块模板,所以,对于任何一个组件,从模板种类的角度来分,其实都可以分为非插槽模板和插槽模板两大类。非插槽模板指的是html模板,比如'DIV,跨度,UL,表'这些,非插槽模板的显示与隐藏以及怎样显示由组件自身控制;插槽模板是狭槽,它是一个空壳子,因为它的显示与隐藏以及最后用什么样的HTML模板显示由父组件控制。但是插槽显示的位置却由子组件自身决定槽写在组件模板的什么位置,父组件传过来的模板将来就显示在什么位置。

注:插槽最后显示不显示是看父组件有没有在孩子组件下面写模板

1.匿名(默认)插槽 : 没有名称属性

2.具名插槽 : 有名称属性

3.作用域插槽:插槽上绑定了数据

作用域插槽 示例代码:

//父组件



 
 export default {
    data: function(){
      return {
        data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
      }
    }
}

 
 

你可能感兴趣的:(vue.js,前端,javascript)