参考网站
https://www.cnblogs.com/h2zZhou/p/8036953.html
方法一、
<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>
createElement函数介绍
createElement(
// {String | Object | Function}
// 一个 HTML 标签字符串,组件选项对象,或者
// 解析上述任何一种的一个 async 异步函数。必需参数。
'div',
// {Object}
// 一个包含模板相关属性的数据对象
// 你可以在 template 中使用这些特性。可选参数。
{
// (详情见下一节)
},
// {String | Array}
// 子虚拟节点 (VNodes),由 `createElement()` 构建而成,
// 也可以使用字符串来生成“文本虚拟节点”。可选参数。
[
'先写一些文字',
createElement('h1', '一则头条'),
createElement(MyComponent, {
props: {
someProp: 'foobar'
}
})
]
)
方法二、
html
<div id="app">
<button @click="add('a-component', 'test')">Add A</button>
<button @click="add('b-component', 'test')">Add B</button>
<component :is="item.component" :text="item.text" v-for="item in items"></component>
</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变化时,就会动态加载组件了