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

我嘗試添加動態組件。這個組件設置成道具。我沒有註冊組件到部分，因爲我現在沒有多少組件和它們的名字會從道具上發送。我使用ES6語法，其中導入js模塊不工作到ready(){}部分。我的代碼：在vue.js中動態添加組件不起作用

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>

動態組件無法呈現：

<component :is="component"/>

附：這上的jsfiddle代碼工作 - open link

來源

2016-08-30 Slava

我甚至不... – gurghet

@gurghet你是說你不懂他的英語？如果是這樣的話，那麼至少應該理解他在說的是什麼，或者在評論中要求澄清。您的評論確實沒有任何用處。 –

你能提供一個樣品小提琴！ – Deepak

你需要解釋的組件名稱解析到: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>

來源

2016-08-30 19:11:30

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

回答

相關問題