vue3 插槽使用方法

vue3 插槽使用方法

让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件 。

包含：默认插槽、具名插槽、作用域插槽、具名作用域插槽

默认插槽

没有名字的插槽，只有一个slot Category标签的内容会替代slot标签

App.vue

  <Category>
       <div>html结构1</div>
       <div>html结构2</div>
      
      // 通过具名插槽的方式填写
      <template #default>
        <p>A paragraph for the main content.</p>
        <p>And another one.</p>
      </template>
      
  </Category>

Category.vue

<template>
  <div>
     <!-- 定义插槽 -->
     <slot>插槽默认内容...</slot>
  </div>
</template>

具名插槽

1、在可以在子组件中用多个插槽，子组件用 name，

2、父组件填写方式一：slot="list"

3、方式二：v-slot:list 或者简写为 #list

父组件

<Category title="foods">
    // 多个标签
    <template slot="list">
        <h1>111</h1>
        <h1>222</h1>
    </template>
    <template v-slot:l>
        <h1>111</h1>
        <h1>222</h1>
    </template>    
    <template #list>
        <h1>111</h1>
        <h1>222</h1>
    </template>
    
    // 单标签
    <a href="#" slot="ad" >我是广告</a>
</Category>

子组件 Category.vue

<template>
    <div class="category">
        具名插槽
        <slot name="list">列表</slot>
        
        <slot name="ad">广告</slot>    
    </div>  
</template>

父组件还可以用用动态插槽名：

<base-layout>
  <template v-slot:[slotName]>
    ...
  </template>

  <!-- 缩写为 -->
  <template #[slotName]>
    ...
  </template>
</base-layout>

<script setup>
let slotName = ref('demo')
</script>

作用域插槽

可以通过插槽完成组件通信，特别是传递 DOM 元素的时候

父组件插槽中可以接收子组件的参数（默认插槽）

<!-- <MyComponent> 子组件（默认插槽） -->
<div>
  <slot :text="greetingMessage" :count="1"></slot>
</div>

<!-- 父组件（默认插槽） -->
<MyComponent v-slot="slotProps">
  {{ slotProps.text }} {{ slotProps.count }}
</MyComponent>

<!-- 还可以解构 -->
<MyComponent v-slot="{ text, count }">
  {{ text }} {{ count }}
</MyComponent>

具名插槽写法

<!-- <MyComponent> 子组件（具名插槽） -->
<slot name="header" message="header"></slot>
<slot name="footer" message="footer"></slot>
<slot message="defalut"></slot>

<MyComponent>
  <template #header="headerProps">
    {{ headerProps }}
    {{ headerProps.message }}
  </template>

  <template #default="defaultProps">
    {{ defaultProps }}
  </template>

  <template #footer="footerProps">
    {{ footerProps }}
  </template>
</MyComponent>

v-slot:name="slotProps" 简写为 #name="slotProps"

useSlots

import { useSlots } from 'vue'

// 获取插槽内容
let slots = useSlots()