Question

我尝试添加动态组件。这个组件设置成道具。我没有将组件注册到components:{}部分，因为我现在没有从props发送多少组件及其名称。我使用ES6语法，其中import 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"/>

P.S。此代码适用于jsfiddle - open link

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>

在vue.js中添加动态组件不起作用

1 个答案: