面试题：Vue中如何使用Fragment实现无包裹元素的插槽

Question

在Vue项目里，假设已有一个自定义组件，需要在该组件内使用插槽，同时要借助Fragment实现无包裹元素的插槽效果，请描述实现步骤，并给出关键代码示例。

Answer 1

1. 实现步骤：
   • 在父组件中使用自定义组件，并在组件标签内添加插槽内容。
   • 在自定义组件模板中，使用 <template v - slot> 语法来定义插槽位置，这里借助Fragment（即<template>标签，它在Vue中充当无真实DOM包裹的容器）来实现无包裹元素的插槽效果。
2. 关键代码示例：
   • 父组件代码：

<template>
  <div>
    <MyComponent>
      <p>这是插槽内容</p>
    </MyComponent>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue';
export default {
  components: {
    MyComponent
  }
};
</script>

• 自定义组件 MyComponent.vue 代码：

<template>
  <template>
    <h2>自定义组件标题</h2>
    <template v - slot>
      <!-- 插槽内容将渲染在这里 -->
    </template>
  </template>
</template>

<script>
export default {
  name: 'MyComponent'
};
</script>