2019.2.12 （vue中slot卡槽）

插槽

在vue中，我们会在开发中经常会使用到插槽slot，通过网上文章的学习，主要参考了这篇文章；https://blog.csdn.net/weixin_41646716/article/details/80450873

单个插槽|匿名插槽|默认插槽

• 按我的话理解，slot就是在子组件上一个占位符，这个占位符里面的内容由改子组件对应的父组件来写，比方说：

父组件

    
        

            1
            2
            3
        
    

上面子组件里面的内容就是父组件要放入子组件占位符里面的

子组件

这样slot就会显示上面父组件的

    1
    2
    3

具名插槽

• 就是插槽带名字，这样就可以在一个子组件中有很多个插槽

父组件

子组件

作用域插槽| 带数据的插槽

• 一般我们slot里面的内容是父组件写好的，那么子组件的slot里面带数据就不一样了，那我父组件来定义样式，数据还是子组件的，解决了普通slot插槽无法在父组件中使用子组件数据的问题

父组件

子组件

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