vue2.0动态添加组件
2024-08-24 20:58:02
方法一、
<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变化时,就会动态加载组件了
最新文章
- java学习笔记之线程1
- jQuery删除节点和追加节点
- hibernate进行多表联合查询
- sprint3 总结
- Web Api 2 用户认证模板解析-----外部用户认证模式
- C#查找子串在原串中出现次数
- [MODx] 7. MIGX DB
- epub格式电子书剖析之三：NCX文件构成
- android测试分析1
- JVM的生命周期——JVM之二
- ssh-copy-id -i ~/.ssh/id_rsa.pub admin@172.17.42.66
- 目标指向、Icon图标的错误
- 老李秘技：LoadRunner支持参数文件极限是多大
- Ambari安装之部署单节点集群
- 关于Mac设置alias别名访问服务器
- Shadow Properties之美（二）【Microsoft Entity Framework Core随笔】
- [机器学习]正则化方法 -- Regularization
- Hibernate 二（一级缓存，多表设计之一对多）
- vue+窗格切换+田字+dicom显示_03
- 学习angularjs的ng-hide和ng-disabled