Vue3 – 组件如何接收外部标签包裹起来的内容
Vue3 - 组件如何接收外部标签包裹起来的内容
前言
最近在写Vue3
的时候,有时候希望将子组件标签包裹起来的内容传入到子组件中,例如:
<div>
<Son>
<父组件定义功能模块>
</Son>
</div>
在React
中,是可以通过{child}
的形式直接获得包裹内容的。但是Vue3中,看似没有这样的功能。这里做个记录,利用slot
插槽来实现。
利用slot插槽接收指定的内容
父组件:
<template>
<div class="fa">
<div style="margin: 10px">我是父组件</div>
<Son slot-Name="testSon">
<template #testSon>
<div><a>AA</a></div>
</template>
</Son>
</div>
</template>
<script setup lang="ts">
import Son from "./Son.vue";
</script>
子组件:
<template>
<div style="margin: 10px; border: 2px solid red">
我是子组件
接收父组件指定的组件
<slot :name="props.slotName"></slot>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
interface Props{
slotName:string;
}
const props = withDefaults(defineProps<Props>(), {
slotName: '',
});
</script>
如图,我在父组件中,使用到了子组件Son
,并且包裹了一个a
标签,并将a
标签的插槽名传入给子组件。子组件再接收完成渲染。如图:
总结下就是:
- 外部使用的时候,可以将想要传递给子组件的内容用
template
包裹定义。并将插槽名称传递给子组件的slotName
属性上。 - 子组件利用
slot
标签完成插槽的渲染。<slot :name="props.slotName"></slot>
版权声明:本文为Zong_0915原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。