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标签的插槽名传入给子组件。子组件再接收完成渲染。如图：

总结下就是：

1. 外部使用的时候，可以将想要传递给子组件的内容用template包裹定义。并将插槽名称传递给子组件的slotName属性上。
2. 子组件利用slot标签完成插槽的渲染。<slot :name="props.slotName"></slot>