Как сохранить имена тегов пользовательских компонентов в Vue.js

Я использую спецификацию однофайлового компонента 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>

vue.js vuejs2 rollup custom-element
person WoodyWoodsta    schedule 23.08.2017    source источник
comment
Есть github.com/karol-f/vue-custom-element Haven Но не использовал.   -  person yuriy636    schedule 24.08.2017
comment
Спасибо, посмотрю. Я все еще стремлюсь найти ответ на этот вопрос, который остается естественным для Vue.   -  person WoodyWoodsta    schedule 24.08.2017
comment
Вы нашли решение?   -  person JCH77    schedule 09.11.2020

Ответы (2)


arrow_upward
0
arrow_downward

Ссылаясь на документацию 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, как в примерах выше, вы не получите желаемого результата. Поэтому, если вы визуализируете свои компоненты другими способами, вы должны получить желаемый результат.

person Umur Alpay    schedule 08.05.2019

arrow_upward
0
arrow_downward

Внутри вашего component-a.vue вы сможете добиться этого, включив некоторый html-код в свой <template> тег, как показано ниже

component-a.vue:

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

Таким образом вы сможете вызывать свой component-a из любого места вашего приложения и отображать элемент с именем customelement.

В идеале вы должны использовать этот «трюк» для визуализации стандартных элементов HTML5, иначе вы можете увидеть некоторую ошибку в консоли приложения vue. Дай мне знать, как дела.

person Adriano    schedule 08.05.2019