vue.js - 如何在 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>

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

<span>Hello World<span>

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

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

Answer 1

在你的 component-a.vue 里面你应该能够通过在你的 <template> 中包含一些 html 代码来实现这一点标记如下

组件-a.vue:

<template>
    <customelement>
        // Other stuff
    </customelement>
</template>

通过这种方式，您将能够从应用中的任何位置调用您的component-a，并呈现一个名为customelement 的元素。 .

理想情况下，您应该使用这个“技巧”来呈现标准的 HTML5 元素，否则您可能会在 vue 应用程序控制台中看到一些错误。让我知道进展如何。