2021-05-20

具名插槽如下：

//home组件代码
<template>
  <div class="home">
    <About>
      <div slot="slot1">你好啊插槽1</div>
      <div slot="slot2">你好啊插槽2</div>
      <div slot="slot3">你好啊插槽3</div>
    </About>
  </div>
</template>

<script>
import About from '@/components/About.vue'

export default {
  name: 'Home',
  components: {
    About
  }
}
</script>

//about组件代码
<template>
  <div class="about">
    <p>about</p>
    <slot name="slot1">默认的内容</slot>
    <slot name="slot2">默认的内容</slot>
    <slot name="slot3">默认的内容</slot>
  </div>
</template>

<script>
export default {
  data(){
    return{
    }
  }
}
</script>

作用域插槽如下：

//父组件
<template>
  <div class="home">
    <About>
      <template slot-scope="user">
         <span v-for="(item,index) in user.data" :key="index">{{item}}</span>
      </template>
    </About>
  </div>
</template>

<script>
import About from '@/components/About.vue'

export default {
  name: 'Home',
  components: {
    About
  },
  data(){
    return{
    }
  }
}
</script>

//子组件
<template>
  <div class="about">
    <p>about</p>
    <slot :data="data">默认的内容</slot>
  </div>
</template>

<script>
export default {
  data(){
    return{
      data: ['你好','我好','他好','它好','大家好','哈哈']
    }
  }
}
</script>

总结：
插槽是使用在子组件中的
插槽是为了将父组件中的子组件模板数据正常显示

具名插槽：
具名插槽就是在父组件中添加一个 slot=‘自定义名称’ 的属性
然后在子组件中的标签属性添加 name=‘自定义名称’

作用域插槽：
在子组件中绑定数据 :data=‘data’
在父组件中使用 slot-scope里面的值可以自定义