Vue.js 2：如何移除插槽内容外层的HTML节点？

你现在遇到的问题是因为插槽内容被包裹在<div>标签里，导致渲染时这个外层节点被保留了下来。要实现去掉外层节点、直接显示文本的效果，我们可以利用Vue提供的插槽容器特性来解决：

方案1：使用<template>作为插槽容器（Vue 2.x 通用） #

<template>是Vue专门用于包裹插槽内容的逻辑容器，它不会被渲染成真实的DOM节点。只需要把原来包裹插槽内容的<div>替换成<template>即可：

修改后的完整代码 #

<div id="app">
  <compo1>
    <template slot="firstname">test</template>
  </compo1>
</div>

new Vue({
  el: '#app',
  components: {
    'compo1': {
      template: '<div><div>Custom Text</div><slot name="firstname"></slot></div>'
    }
  }
});

这样渲染后的结果就是你期望的：

<div><div>Custom Text</div>test</div>

方案2：使用v-slot语法（Vue 2.6+ 推荐） #

如果你使用的是Vue 2.6及以上版本，推荐使用更直观的v-slot语法来定义具名插槽，同样搭配<template>使用：

修改后的父组件代码 #

<div id="app">
  <compo1>
    <template v-slot:firstname>test</template>
  </compo1>
</div>

组件代码无需改动，最终渲染效果和方案1完全一致。

原理说明 #

原来的写法会保留外层<div>，是因为Vue会将你包裹插槽内容的HTML标签连同内部文本一起插入到插槽位置。而<template>仅作为插槽的逻辑占位符，不会生成实际DOM元素，所以只会把里面的纯文本内容插入到插槽中，完美满足你的需求。

内容的提问来源于stack exchange，提问作者user3126180