Vue.js에서 사용자 지정 구성 요소 태그 이름을 유지하는 방법

Vue.js에서 사용자 지정 구성 요소 태그 이름을 유지하는 방법

Vue의 싱글 파일 컴포넌트 사양을 사용하고 있습니다.*.vue커스텀 컴포넌트의 경우)을 참조해 주세요.와 함께rollup그리고.rollup-plugin-vue작성한 커스텀 컴포넌트의 출력이 동등한html 요소로 구성되는 것을 DOM에서 확인했습니다.

예를 들어 다음과 같습니다.

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-aVue 마운트 컴포넌트에 추가되어 DOM 내의 2개의 컴포넌트의 템플릿 콘텐츠 합계에 렌더링됩니다.이 경우는 단순히span요소:

<span>Hello World<span>

커스텀 요소의 템플릿이 태그 이름을 유지하는 태그에 의해 DOM에 표시되도록 아래 스니펫과 같이 DOM에서 렌더링된 출력을 얻을 수 있습니까?

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

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">

위의 예시와 같이 Vuej를 사용하면 원하는 결과를 얻을 수 없습니다.따라서 컴포넌트를 다른 방법으로 렌더링하면 원하는 결과를 얻을 수 있습니다.

사용자 내부component-a.vuehtml 코드를 포함시킴으로써 그것을 달성할 수 있을 것입니다.<template>다음과 같은 태그를 붙이다

component-a.vue:

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

이렇게 하면 앱 내 어디에서든 컴포넌트를 호출하여 이름 있는 요소를 렌더링할 수 있습니다.customelement.

이 "꼼수"를 사용하여 표준 HTML5 요소를 렌더링하는 것이 이상적입니다. 그렇지 않으면 vue 앱 콘솔에 오류가 표시될 수 있습니다.어떻게 되어 가는지 나에게 알려줘.

언급URL : https://stackoverflow.com/questions/45849646/how-to-preserve-custom-component-tag-names-in-vue-js