Vue3基础之插槽

简述

我们已经了解到组件能够接收任意类型的 JavaScript 值作为 props，但组件要如何接收模板内容呢？在某些场景中，我们可能想要为子组件传递一些模板片段，让子组件在它们的组件中渲染这些片段。
由此我们可以使用插槽组件，父组件插入模板内容，子组件显示模板。

插槽

1. 匿名插槽
2. 具名插槽
3. 作用域插槽
4. 动态插槽

1. 匿名插槽

• 父组件

插槽内容 <button>23</button>

<template>
 <div>   
    <SonB>
        <button>23</button>
    </SonB> 
 </div>
</template>

• 子组件

显示插槽内容 <slot></slot> 做出插槽出口，有几个 <slot></slot>显示几个 <button>23</button>

<template>
  <div>
        这是B组件
        <slot></slot>
        <slot></slot>
  </div>
</template>

2. 具名插槽

• 父组件

插槽内容 <template v-slot:xxx>23</template> v-slot 设置插槽名称

<template>
 <div>   
    <SonB>
        <template v-slot:xxx>23</template>
    </SonB> 
 </div>
</template>

• 子组件

显示插槽内容 <slot name="xxx"></slot>做出插槽出口，name="xxx" 显示v-slot为xxx的插槽。

<template>
  <div>
        这是B组件
        <slot name="xxx"></slot> 
  </div>
</template>

3. 作用域插槽

• 父组件

插槽内容 v-slot会把子组件的:data 引入过来

 <template>
 <div>   
    <SonB >
        <template v-slot="sonBdata">
             {{sonBdata.data}}
        </template>
    </SonB>  
 </div>
</template>

• 子组件

通过:data 传递相当于组件prop属性

<template>
  <div>
        这是B组件 
        <div>
            <div v-for="item in list" :key="item.index">
               <slot :data="item"></slot>
            </div>
        </div> 
  </div>
</template>
<script setup>
   import {reactive} from 'vue'
   const list = reactive([
       {name:'张三',age:18},
       {name:'李四',age:18},
       {name:'赵六',age:18}
   ])
</script>

4. 动态插槽

• v-slot 使用变量v-slot=[sonBdata]
• 父组件

插槽内容 v-slot和#[]一样，若是使用动态插槽使用#[变量名称]

<template>
 <div>   
    <SonB > 
        <template #[slotStr]>
             123123123123123
        </template>
    </SonB>  
 </div>
</template>
<script setup>    
    import SonB from './SonB.vue';
    import {ref} from 'vue'
    const  slotStr = ref('xxx')
</script>

• 子组件

通过声明变量，通过name应用插槽

<template>
  <div>
        这是B组件  
        <slot :name="nn"></slot>
  </div>
</template>
<script setup>
   import {ref} from 'vue'
   const nn = ref('xxx') 
</script>