Vue 구성 요소의 조건부 루트 태그

Vue 구성 요소의 조건부 루트 태그

나의 질문

다음과 같은 컨텐츠를 렌더링하는 Vue 컴포넌트가 있습니다.

<template>

    <div class="item">
        <h1>{{ title }}</h1>
        <p>{{ contents }}</p>
        <!-- Lot's of other stuff... -->
    </div>

</template>

<script>
    // export default...
</script>

<style lang="scss">
    // style...
</style>

의 내용에 주의해 주세요.div...

경우에 따라서는, 나는 바꿀 필요가 있다.<div class="item">로.<a class="item">이 점을 염두에 두고 태그를 조건부로 변경할 수 있는 방법이 있습니까(예:a,div)는 Vue 컴포넌트의 루트 요소에 대응하고 있습니까?

조사.

인터넷을 검색해 본 결과, 사용 방법에 대해 알 수 있었습니다.render다음과 같이 기능합니다.

render (createElement) {
    return createElement(this.tag, {}, this.$slots.default);
}

위의 문제는 예를 들어 2개의 개별 컴포넌트가 필요하다는 것입니다.Item.vue그리고.ItemTag.vue1개의 컴포넌트로 이 작업을 수행할 수 있는 방법이 있습니까?

당신이 사용할 수 있다고 믿습니다.is:

<div :is="useA ? 'a' : 'div'">
    ...
</div>

이것은 의학박사들이 제안하는 것은 아니지만 원하는 효과를 가지고 있는 것 같다.

https://vuejs.org/v2/api/#는

사용방법render대신 함수는 반드시 2개의 컴포넌트를 가질 필요는 없지만 템플릿 전체를 재작성해야 합니다.render기능.

언급URL : https://stackoverflow.com/questions/56469012/conditional-root-tag-on-vue-component