vue slot 插槽的简单讲解和示例

插槽其实可以理解是父子组件的传参，或者或动态的占位符，父组件决定插槽的内容，子组件决定插槽的插在何处。

1.不具名插槽

    即插槽中不用写name去匹配，直接使用

(1)在引入的子组件标签中写入要插入的内容

(2)在子组件中写一个插槽标签来接收内容

效果：

2.具名插槽

即需要在父组件引入的子组件标签中写入插槽内容，标签中的slot的属性值，会对应子组件slot标签的name属性值，注意，没有匹配上的不会显示

(1)父组件写入要插入的内容，同时配置slot 属性，来对应要插入子组件的哪个slot插槽 

(2)子组件通过slot标签的name属性来匹配父组件的传入的值

(3)效果：

3.作用域插槽

获取子组件slot中携带的数据

作用域插槽是一种子传父传参的方式，解决了普通slot在parent中无法访问child数据的问题；

子组件

在子组件的slot标签上绑定需要的值，这里我们写的是通过data这个key传给父组件，实际上这个key你可以随意定义的，相应的在父组件那边用同样的key接收

<template>
  <div>
    我是作用域插槽的子组件
    <slot :data="user"></slot>
  </div>
</template>

<script>
export default {
  name:'my-son',
  data () {
    return {
      user: [
        {name: 'Jack', sex: 'boy'},
        {name: 'Jone', sex: 'girl'},
        {name: 'Tom', sex: 'boy'}
      ]
    }
  }
}
</script>

父组件

通过slot-scope可以获取到子组件所有暴露出来的属性，slot-scope对应的变量也可以随意取名，它里面就包括我们刚才暴露出来的data属性。  slot-scope: { data: xxxx }

<template>
  <div>
    我是作用域插槽
    <my-son>
      <template slot-scope="sonData">
        <div v-for="(item, index) in sonData.data" :key="index">
        {{item}}
        </div>
      </template>
    </my-son>
  </div>
</template>

在父组件上使用slot-scope属性，sonData.data就是子组件传过来的值