2019.2.12 （vue中slot卡槽）

插槽

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

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

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

父组件

<div>
    <child>
        <div class="span-box">
            <span>1<span>
            <span>2<span>
            <span>3<span>
        </div>
    </child>
</div>

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

子组件

<template>
    <div>
        <span>子组件的span</span>
        <slot></slot>
    </div>
</template>

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

<div class="span-box">
    <span>1<span>
    <span>2<span>
    <span>3<span>
</div>

具名插槽

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

父组件

<template>
  <div>
    <h3>这里是父组件</h3>
    <child>
      <div slot="first">
        <span>菜单1</span>
        <span>菜单2</span>
      </div>
      <div slot="second">
        <span>菜单-1</span>
        <span>菜单-2</span>
        <span>菜单-3</span>
      </div>
      <div>
        <span>菜单->1</span>
      </div>
    </child>
  </div>
</template>

子组件

<template>
  <div class="child">
    // 具名插槽
    <slot name="first"></slot>
    <h3>这里是子组件</h3>
    // 具名插槽
    <slot name="second"></slot>
    // 匿名插槽
    <slot></slot>
  </div>
</template>

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

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

父组件

<template>
  <div class="father">
    <h3>这里是父组件</h3>
    <!--第一次使用：用flex展示数据-->
    <child>
      <template slot-scope="user">
        <div class="tmpl">
          <span v-for="item in user.data">{{item}}</span>
        </div>
      </template>
 
    </child>
 
    <!--第二次使用：用列表展示数据-->
    <child>
      <template slot-scope="user">
        <ul>
          <li v-for="item in user.data">{{item}}</li>
        </ul>
      </template>
 
    </child>
 
    <!--第三次使用：直接显示数据-->
    <child>
      <template slot-scope="user">
       {{user.data}}
      </template>
 
    </child>
 
    <!--第四次使用：不使用其提供的数据, 作用域插槽退变成匿名插槽-->
    <child>
      我就是模板
    </child>
  </div>
</template>

子组件

<template>
  <div class="child">
 
    <h3>这里是子组件</h3>
    // 作用域插槽
    <slot  :data="data"></slot>
  </div>
</template>
 
 export default {
    data: function(){
      return {
        data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
      }
    }
}