方法一、
<template>
<input type="text" v-model='componentName'> <button @click='add'>click me to add a component</button> </template> <script> // 引入要添加的所有組件 import component1 from './components/component1.vue' import component2 from './components/component2.vue' export default { data: function() { return { allComponents: [], componentName: '' } }, components: { // 注冊所有組件 component1, component2 } methods: { add: function() { this.allComponents.push(this.componentName) // 重置輸入框 this.componentName = '' }, render: function(h) { // h 為 createElement 函數，接受三個參數 // tag // data // children 具體看文檔吧 return h('div',this.allComponents.map(function(componentName) { return h(componentName) })) } } } </script>
方法二、html
<div id="app"> <button @click="add('a-component', 'test')">Add A</button> <button @click="add('b-component', 'test')">Add B</button> <ul> <li :is="item.component" :text="item.text" v-for="item in items"></li> </ul> </div>javascript
var AComponent = Vue.extend({ props: ['text'], template: '<li>A Component: {{ text }}</li>' }) var BComponent = Vue.extend({ props: ['text'], template: '<li>B Component: {{ text }}</li>' }) new Vue({ el: '#app', components: { 'a-component': AComponent, 'b-component': BComponent, }, data: { items: [] }, methods: { add(component, text) { this.items.push({ 'component': component, 'text': text, }) } } })
方法三、
我是寫在父組件中的:
Vue.component('mycontent', { props: ['content'], data() { return { coms: [], } }, render: function(h) { this.coms = []; for(var i = 0; i < this.content.length; i++) { this.coms.push(h(this.content[i], {})) } return h('div', {}, this.coms) }, });調用的時候
<mycontent v-bind:content="content"></mycontent> 那么父組件中的content變化時,就會動態加載組件了