如何在 Vue.js 中保留自定义组件标签名称

Question

我将 Vue 的单文件组件规范 ( *.vue) 用于我的应用程序中的自定义组件。与rollup和一起rollup-plugin-vue，我观察到 DOM 中的输出，对于我编写的自定义组件，由等效的 html 元素组成。

例如：

component-a.vue

<template>
  <span>Hello World</span>
</template>

<script>
export default { name: 'component-a' };
</script>

component-b.vue

<template>
  <component-a></component-a>
</template>

<script>
import ComponentA from './path/to/component-a.vue';

export default { name: 'component-b', components: { ComponentA } };
</script>

上面的例子，如果component-a被添加到 Vue 挂载组件中，将会渲染到DOM 中两个组件的模板内容的总和，在这种情况下它只是一个span元素：

<span>Hello World<span>

是否可以像下面的代码片段那样在 DOM 中实现渲染输出，这样自定义元素的模板在 DOM 中由保留其标签名称的标签表示？

<component-b>
  <component-a>
    <span>Hello World</span>
  </component-a>
</component-b>

Answer 1

参考Vuejs文档 https://v2.vuejs.org/v2/guide/components.html#DOM-Template-Parsing-Caveats

应该注意的是，如果您使用来自以下来源之一的字符串模板，则此限制不适用：

String templates (e.g. template: '...')
Single-file (.vue) components
<script type="text/x-template">

如果你像上面的例子一样使用 Vuejs，你将不会得到你想要的结果。因此，如果您以其他方式渲染组件，您应该会得到您想要的结果。