vue插槽的使用

---

前言

插槽总共分为3类：默认插槽，具名插槽，作用域插槽

默认插槽

默认插槽只需要在子组件的新增一个slot标签，父组件的子组件标签的内容就是要插入的内容

父组件

<template v-bind='$attrs'>
  <div class="hello">
    最高级的组件
    <Home>	//子组件
      要插入给子组件的插槽内容
    </Home>
  </div>
</template>

子组件

<template>
    <div>
        第二个子组件
        <slot>默认内容</slot> //如果不传就会显示默认内容
    </div>
</template>

具名插槽

就是要传的插槽有多处因此要为此立名，好让其知道插入的内容是放在哪里的

父组件

<template v-bind='$attrs'>
  <div class="hello">
    最高级的组件
    <Home>
      <template v-slot:one_solt>  //template模板定义 v-slot:插槽名
        <div>给第一个插槽</div>
      </template>
      <template v-slot:two_solt>
        给第物色个任务个插槽
      </template>
    </Home>
  </div>
</template>

子组件

<template>
    <div>
        第二个子组件
        <slot name="one_solt">我是默认插槽</slot>  //name对应父组件的v-slot
        <slot name="two_solt">我是默认插槽2</slot>
        <slot>默认</slot>
    </div>
</template>

作用域插槽

作用域插槽就是子组件自己定义子组件要插入内容，目前没有用到过，使用场景个人感觉不大，如果因为要父子组件数据相通的话完全可以使用数据传值

父组件

<template v-bind='$attrs'>
  <div class="hello">
    最高级的组件
    <Home>
    //当只有一个作用域插槽的时候模板标签可以省略，v-slot直接写在子组件标签就行，后面接收的是自己定义的一个名字
      <template v-slot="getslotData">  
        <div>{{ getslotData.obj.msg }}</div>//子组件定义插槽的数据
      </template>
    </Home>
  </div>
</template>

子组件

这里要注意几个点 ，如果父组件只有一个模板接收，子组件可以写多个插槽，但是插槽传的数据必须一直，下面例子都是一致的obj

<template>
    <div>
        第二个子组件
        <slot :obj="obj1">默认</slot>
        <slot :obj="obj2">默认</slot>
    </div>
</template>
  data() {
        return {
            obj1: {
                msg: '我是第一个插槽的内容ewr'
            },
            obj2: {
                msg: '我是第一个插槽的内容ewegewgrewwr'
            }
        }
    },

下面我演示作用域插槽的几种用法分别报那些错

虽然报错但是不影响显示既然不让我们这样写那就尽量不要这样写，前面加个命名就好了

还有一种可以用slot-scope 也可以取到值