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

Add dynamically components in vue.js not working

本文关键字：组件 工作 添加 动态 vue js      更新时间：2023-09-26

我尝试添加动态组件。这个组件设置成props。我没有将组件注册到components:{}部分，因为我不知道有多少组件和它们的名称将从props发送。我使用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"/>

注:此代码适用于jsfiddle - open link

您需要将解释后的组件名称解析为: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>
相关文章：