我将 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>
最佳答案
在你的 component-a.vue
里面你应该能够通过在你的 <template>
中包含一些 html 代码来实现这一点标记如下
组件-a.vue:
<template>
<customelement>
// Other stuff
</customelement>
</template>
通过这种方式,您将能够从应用中的任何位置调用您的component-a,并呈现一个名为customelement
的元素。 .
理想情况下,您应该使用这个“技巧”来呈现标准的 HTML5 元素,否则您可能会在 vue 应用程序控制台中看到一些错误。让我知道进展如何。
关于vue.js - 如何在 Vue.js 中保留自定义组件标签名称,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45849646/