Vue3通信方式 插槽

插槽就是子组件中的提供给父组件使用的一个占位符，用 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签，父组件填充的内容称为插槽内容。

子组件不提供插槽时，父组件填充失效
父组件无填充时，中的备用内容会启用生效
父级模板里的所有内容都是在父级作用域中编译的，子模板里的所有内容都是在子作用域中编译的，互不影响

<template><div><h1>slot</h1><Test1 :todos="todos"><template v-slot="{ $row, $index }"><p :style="{ color: $row.done ? 'green' : 'red' }">{{ $row.title }}--{{ $index }}</p></template></Test1><Test><div><pre>大江东去浪淘尽,千古分流人物</pre></div><!-- 具名插槽填充a --><template #a><div>我是填充具名插槽a位置结构</div></template><!-- 具名插槽填充b v-slot指令可以简化为# --><template #b><div>我是填充具名插槽b位置结构</div></template></Test></div>
</template><script setup lang="ts">
import Test from "./Test.vue";
import Test1 from "./Test1.vue";
//插槽:默认插槽、具名插槽、作用域插槽
//作用域插槽:就是可以传递数据的插槽,子组件可以讲数据回传给父组件,父组件可以决定这些回传的
//数据是以何种结构或者外观在子组件内部去展示！！！import { ref } from "vue";
//todos数据
let todos = ref([{ id: 1, title: "吃饭", done: true },{ id: 2, title: "睡觉", done: false },{ id: 3, title: "打豆豆", done: true },{ id: 4, title: "打游戏", done: false },
]);
</script><style scoped>
</style>

<template><div class="box"><h1>我是子组件默认插槽</h1><!-- 默认插槽 --><slot></slot><h1>我是子组件默认插槽</h1><h1>具名插槽填充数据</h1><slot name="a"></slot><h1>具名插槽填充数据</h1><h1>具名插槽填充数据</h1><slot name="b"></slot><h1>具名插槽填充数据</h1></div>
</template><script setup lang="ts">
</script><style scoped>
.box {width: 100vw;height: 500px;background: skyblue;
}
</style>

<template><div class="box"><h1>作用域插槽</h1><ul><li v-for="(item, index) in todos" :key="item.id"><!--作用域插槽:可以讲数据回传给父组件--><slot :$row="item" :$index="index"></slot></li></ul></div>
</template><script setup lang="ts">
//通过props接受父组件传递数据
defineProps(["todos"]);
</script><style scoped>
.box {width: 100vw;height: 400px;background: skyblue;
}
</style>