Vue插槽

总结Vue插槽的用法

 什么是插槽： 在 子组件 中使用<slot></slot>占据一个位置，在父组件中引入子组件并且使用，<son></son>中所写的内容就是子组件内<slot></slot>中所显示的内容

匿名插槽

子组件

<template>
  <div>
    <p>我是子组件</p>
    <slot></slot>
  </div>
</template>
 
<script>
export default {
  name:'son',
  data(){
    return {
 
    }
  }
}
</script>

父组件

<template>
  <div>
    <p>我是父组件</p>
    <son>我是父组件内容，显示在子组件内</son>
  </div>
</template>
 
<script>
import son from './son'
export default {
  name:'father',
  components:{
    son  
  },
}
</script>

具名插槽

具有名字的插槽，不同名字的父组件template会显示在不同子组件slot中

子组件

<template>
  <div>
    <p>我是子组件</p>
    <slot name='A'></slot>
    <slot name='B'></slot>
    <slot name='C'></slot>
  </div>
</template>

 父组件

<template>
  <div>
    <son>
      <template slot='A'>
        <p>子组件slot中name的值 === 父组件template中slot的值   A</p>
      </template>
      <template slot='B'>
        <p>子组件slot中name的值 === 父组件template中slot的值   B</p>
      </template>
      <template slot='C'>
        <p>子组件slot中name的值 === 父组件template中slot的值   C</p>
      </template>

    </son>
  </div>
</template>

作用域插槽

子组件中的数据父组件无法使用，此时将子组件数据在slot通过 :obj=‘obj’ 的方式传输，父组件通过在template中slot-scope="data"的方式接收

子组件

<template>
  <div>
    <p>我是子组件</p>
    <slot :obj="obj">{{obj.firstName}}</slot>
  </div>
</template>

父组件

<template>
  <div>
    <p>我是f父组件</p>
    <son>
      <template slot-scope="data">
        {{data.obj.lastName}}
      </template>
    </son>
  </div>
</template>

本文章参考https://blog.csdn.net/qq_41809113/article/details/121640035制作