Vue 2에서 소품을 기반으로 다이내믹 태그를 작성하는 방법

Vue 2에서 소품을 기반으로 다이내믹 태그를 작성하는 방법

vue-router와 유사한 컴포넌트를 만들려면 어떻게 해야 합니까?router-link템플릿을 렌더링하기 위해 소품을 통해 태그를 얻을 수 있습니까?

<my-component tag="ul">
</my-component>

렌더링:

<ul>
  anything inside my-component
</ul>

빌트인을 사용할 수 있습니다.component다음과 같은 요소:

<component is="ul" class="foo" style="color:red">
  anything inside component
</component>

참조: https://vuejs.org/v2/guide/components.html#Dynamic-Components

편집: @krukid 답변을 확인해 주세요.더 좋은 해결책입니다.몰랐습니다component내가 대답했을 때 요소

렌더링 함수 방식:

렌더링 기능을 사용하는 "래퍼 구성요소"를 작성해야 합니다.

import Vue from 'vue';

Vue.component('wrapper-component', {
  name: 'wrapper-component',
  render(createElement) {
    return createElement(
      this.tag,   // tag name
      this.$slots.default // array of children
    );
  },

  props: {
    tag: {
      type: String,
      required: true,
    },
  },
});

다른 템플릿에서는 다음과 같이 사용합니다.

<wrapper-component tag="div">
  <span>All this will be rendered to inside a div</span>
  <p>
    All 
  </p>
</wrapper-component>

그리고 그 결과 이 모든 것이 될 것이다.

<div>
  <span data-v-4fcf631e="">All this will be rendered to inside a div</span> 
  <p data-v-4fcf631e="">
    All 
  </p>
</div>

렌더 함수에 대한 자세한 내용은 공식 문서를 참조하십시오.

언급URL : https://stackoverflow.com/questions/41748934/how-to-create-dynamic-tag-based-on-props-with-vue-2