vue3-插槽slot

• 子组件留下占位符，由父组件决定内容
• 子组件可以向父组件传递值，父组件通过解构的方式获取变量，然后使用
• 具名插槽，对某个插槽自定义了名字
• 默认插槽，没有命名的默认是default

父组件

<template>
  <div>
    <a-vue>
      <template #top>父组件在子组件上方传递了值</template>
      
      <!--    解构方式获取变量data-value,title  -->
      <template #default="{ dataValue, title }">
        父组件在子组件默认位置传递了值
        <div>子组件向父组件传递了变量：dataValue:{{ dataValue }}, title:{{ title }}</div>
      </template>
      
      <template #bottom>父组件在子组件下方传递了值</template>
    </a-vue>
  </div>
</template>

<script lang="ts">
export default {
  name: 'ApplyAWSIndex',
};
</script>
<script setup lang="ts">
import AVue from './A.vue';
</script>

<style scoped></style>

子组件

<template>
  <div>
    <div style="border: 1px solid black; height: 500px; background-color: red">
      <slot name="top"></slot>
    </div>
    <div style="border: 1px solid black; height: 500px; background-color: green">
      <!--    data-value,title是自定义的名字  -->
      <slot :data-value="data" :title="title"></slot>
    </div>
    <div style="border: 1px solid black; height: 500px; background-color: blue">
      <slot name="bottom"></slot>
    </div>
  </div>
</template>
 
<script setup lang="ts">
import { ref, reactive } from 'vue';

const title = ref('test');

const data = reactive([
  {
    name: 'menffy1',
    age: 12,
  },
  {
    name: 'menffy2',
    age: 12,
  },
  {
    name: 'menffy3',
    age: 12,
  },
]);
</script>

<style scoped></style>