在vue.js中動態添加組件不起作用

Question

我嘗試動態添加組件。 此組件設置為道具。 我不會將組件注冊到components:{}部分中，因為我現在不從道具中發送多少組件及其名稱。 我使用ES6語法，其中導入js模塊無法在ready(){}部分中使用。 我的代碼：

 let Child = Vue.extend({ data() { return { msg: 'CHILDREN' } }, template: '<div class="c-child">component {{msg}}</div>' }) let Parent = Vue.extend({ props: { component: '' }, data() { return { msg: 'PARENT' } }, template: '<div class="c-parent">from component- {{msg}}<br><component :is="component"/></div>', }) // register Vue.component('parent-component', Parent) // create a root instance let vue = new Vue({ el: '#root' }) 

 .c-parent { border: 1px solid red; padding: 10px; } .c-child { border: 1px solid green; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.common.js"></script> <div id="root"> <parent-component :component="Child"></parent-component> </div> 

動態組件無法渲染：

<component :is="component"/>

PS此代碼在jsfiddle上有效- 打開鏈接

Answer 1

您需要將解釋后的組件名稱解析為:is=""組件，以下列方式定義它們：

import GroupsGrid from './../../components/groups'
import RolesGrid from './../../components/roles'
import MainTabs from './../../components/main-tabs.vue' // <-- this component will be render other components

    data: {
        tabs: {
            'GroupsGrid': 'groups-grid',
            'RolesGrid': 'roles-grid'
        }
    },

仍然像這樣使用

<component :is="tabs.GroupsGrid"></component>