vue中的插槽用法（动态插槽）-编程知识

vue中的插槽用法（动态插槽）

vue中提供了一种通讯方式叫插槽>分为：默认插槽、具名插槽(作用域插槽)

1. 当一个组件有不确定的结构时, 就需要使用slot技术了

2. 注意: 插槽内容是在父组件中编译后, 再传递给子组件

3. 如果决定结构的数据在父组件, 那用默认slot或具名slot

(1) 当只有一个不确定的结构时, 可以使用默认slot

(2) 当有多个不确定的结构时, 可以使用具名slot
(3）如果决定结构的数据在子组件, 那需要使用具名slot（作用域slot）

在 Vue3 中，作用域插槽已被废弃，改为了新的 v-slot 语法。新的 v-slot 语法与 Vue2 中的作用域插槽类似，但是使用方式有所不同。

在 Vue3 中，我们可以使用 v-slot 来声明一个插槽，并绑定插槽的参数。

<template v-slot:footer>
</template>
<!--简写法：-->
<template #footer>
</template>

默认插槽和具名插槽的用法+动态插槽名：

父组件

<template><Child><template v-slot:header>{{text}}传来的具名插槽header</template><template #header2><p>{{text}}传来的具名插槽header2</p></template><p>{{text}}传来的默认插槽1</p><p>{{text}}传来的默认插槽2</p><template v-slot:footer="{title}"><p>父组件来控制插槽内容：{{ title }}</p></template><!-- 动态插槽名 --><template v-slot:[mySlotName1]><p>动态插槽名1</p></template><!-- 缩写动态插槽名 --><template #[mySlotName2]><p>动态插槽名2</p></template></Child>
</template><script lang="ts">
// vue3.0版本语法
import { ref, defineComponent } from "vue";
import Child from './child.vue'export default defineComponent({name: "父组件",components: {Child},setup() {const text = ref('父组件');const mySlotName1 = ref('name1')const mySlotName2 = ref('name2')// 3秒后 将动态的插槽name1 和 name2 调换位置setTimeout(() => {mySlotName1.value = 'name2'mySlotName2.value = 'name1'}, 3000)return {text,mySlotName1,mySlotName2};},
});
</script>

子组件

<template><div style="font-size: 14px"><header><!--具名插槽--><slot name="header"></slot>  <slot name="header2"></slot> </header><main><!--默认插槽--><slot></slot> </main><footer><!--具名插槽--><slot name="footer" :title="title"></slot> </footer><slot name="name1" ></slot> <slot name="name2" ></slot> </div>
</template><script lang="ts">
// vue3.0版本语法
import { ref, defineComponent } from "vue";export default defineComponent({name: "Child",setup() {const title = ref('子组件title');return {title};},
});
</script>