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中实现渲染输出，如下面的代码片段，以便自定义元素＆＃39;模板在DOM中由标签表示，这些标签保留了它们的标签名称？

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

Answer 1

参考Vuejs文档 https://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，则不会获得所需的结果。因此，如果以其他方式渲染组件，则应该获得所需的结果。

Answer 2

在component-a.vue内，您应该能够通过在<template>标记内添加一些html代码，如下所述

component-a.vue：

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

通过这种方式，您将可以从应用程序中的任何位置调用 component-a ，并呈现名为customelement的元素。

理想情况下，您应该使用此“技巧”来呈现标准HTML5元素，否则在vue应用程序控制台中可能会看到一些错误。让我知道怎么回事。

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

2 个答案: