vue3 slot 传值

<template>
  <div>
    <!-- 定义一个具有插槽的组件 -->
    <ChildComponent>
      <!-- 通过具名插槽传递值 -->
      <template #header="slotProps">
        <h1>{{ slotProps.title }}</h1>
      </template>

      <!-- 通过默认插槽传递内容 -->
      <p>这是默认插槽的内容。</p>

      <!-- 通过作用域插槽传递值 -->
      <template #footer="slotProps">
        <p>{{ slotProps.footerText }}</p>
      </template>
    </ChildComponent>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

// 定义子组件，包含多个插槽
const ChildComponent = defineComponent({
  name: 'ChildComponent',
  setup() {
    // 可以在这里定义一些数据或逻辑
    return {};
  },
  template: `
    <div>
      <!-- 定义具名插槽 header -->
      <header>
        <slot name="header" :title="headerTitle"></slot>
      </header>

      <!-- 定义默认插槽 -->
      <main>
        <slot></slot>
      </main>

      <!-- 定义具名插槽 footer -->
      <footer>
        <slot name="footer" :footerText="footerText"></slot>
      </footer>
    </div>
  `,
  data() {
    return {
      headerTitle: '欢迎来到 Vue3 插槽示例',
      footerText: '这是页脚文本'
    };
  }
});

export default defineComponent({
  components: {
    ChildComponent
  }
});
</script>

<style scoped>
/* 这里可以添加样式 */
</style>

解释说明：

1. 父组件：

   • 父组件使用 <ChildComponent> 标签来引入子组件。
   • 使用 v-slot 指令（简写为 #）来定义具名插槽，并通过 slotProps 接收子组件传递的数据。
   • 默认插槽可以直接放置在 <ChildComponent> 标签内。

2. 子组件：

   • 子组件定义了三个插槽：header、默认插槽和 footer。
   • 使用 slot 标签定义插槽，并通过 :title 和 :footerText 将数据传递给父组件。
   • data 函数中定义了 headerTitle 和 footerText，这些数据会传递给父组件。

通过这种方式，父组件可以在使用子组件时灵活地插入自定义内容，并且可以接收子组件传递的数据。