Cách tạo thẻ động dựa trên đạo cụ với Vue 2

Question

Tôi làm cách nào để tạo thành phần tương tự như vue-router router-link nơi tôi lấy thẻ qua đạo cụ để hiển thị mẫu của tôi?

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

sẽ render:

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

Answer 1

Bạn cần phải tạo một "thành phần wrapper" mà sử dụng một chức năng render.

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, 
    }, 
    }, 
}); 

sau đó trong bất kỳ mẫu nào khác chỉ cần sử dụng như sau

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

và rằng nên làm điều này

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

Để biết thêm về làm cho chức năng xin vui lòng xem official documentation

Answer 2

Bạn có thể sử dụng phần tử component được tích hợp sẵn như sau:

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