使用useAttrs和练习切换插槽

父组件
<template>
  <div>
    <child data-msg="Hello" :data-status="activated">
      <template #[dynamicSlotName]>HAHH</template>
    </child>
    <el-button @click="changeFun">点击修改status;并切换插槽</el-button>
  </div>
</template>

<script lang="ts" setup>
import child from "./components/child.vue";
let activated = ref(true);
const dynamicSlotName = ref("slotA");
const changeFun = () => {
  activated.value = !activated.value;
  dynamicSlotName.value = dynamicSlotName.value === "slotB" ? "slotA" : "slotB";
};
</script>
<style lang="scss" scoped></style>

子组件
<template>
  <div>
    {{ data }}
    <p style="background-color: red">
      <slot name="slotA"></slot>
    </p>
    <p style="background-color: green">
      <slot name="slotB"></slot>
    </p>
  </div>
</template>
<script setup lang="ts">
//  Attribute的使用； useAttrs  获取父组件传的属性
const data = useAttrs();
console.log(data);
</script>

<style scoped lang="scss"></style>