Hinzufügen dynamisch Komponenten in vue.js funktioniert nicht

Question

Ich versuche dynamisch Komponente hinzuzufügen. Diese Komponente wird in Requisiten eingefügt. Ich registriere keine Komponenten in Abschnitt, weil ich jetzt nicht wie viele Komponenten und deren Name von Requisiten gesendet werden. Ich benutze ES6-Syntax, wo importieren js-Module nicht in ready(){} Abschnitt arbeiten. Mein Code:

let Child = Vue.extend({ 
 
    data() { 
 
    return { 
 
    \t msg: 'CHILDREN' 
 
    } 
 
    }, 
 
    template: '<div class="c-child">component {{msg}}</div>' 
 
}) 
 

 

 
let Parent = Vue.extend({ 
 
\t props: { 
 
    \t component: '' 
 
    }, 
 
    data() { 
 
    return { 
 
    \t 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>

dynamische Komponente nicht machen:

<component :is="component"/> 

P. S. Dieser Code Arbeit an jsfiddle - open link

Answer 1

Sie müssen die interpretierten Komponentennamen zu :is="" Komponente analysieren, so dass sie die folgende Art und Weise definiert, funktionieren sollte:

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' 
     } 
    }, 

Und noch verwendet wie dieses

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