Vue 2を使用して小道具に基づいて動的タグを作成する方法

Question

vue-routerと似たようなコンポーネントを作るにはどうすればよいですか？

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

がレンダリングされます：

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

Answer 1

あなたはレンダリング機能を使用する "ラッパーコンポーネント" を作成する必要があります。

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> 

にレンダリングする必要があるとして、他のテンプレートだけで使用して参照してください。official documentation

Answer 2

ます次のように組み込みのcomponent要素を使用できます。

<component is="span" class="foo" style="color:red"> 
    nested stuff 
</component>