正文
vue 动态插入组件
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
HTML代码：
<div id="app">
<p>{{ message }}</p>
<button @click="add('a-component', '我是A')">添加A组件</button>
<button @click="add('b-component', '我是B')">添加B组件</button>
<component :is="item.component" :text="item.text" v-for="item in items"></component>
</div>
JS代码：
const aComponent = Vue.extend({
props: ['text'],
template: '<li>A Component: {{ text }}</li>'
})
const bComponent = Vue.extend({
props: ['text'],
template: '<li>B Component: {{ text }}</li>'
})
new Vue({
el: '#app',
data () {
return {
message: 'Hello Vue.js!',
items: []
}
},
methods: {
add (name, text) {
this.items.push({
component: name,
text: text
})
}
},
components: {
aComponent,
bComponent
}
})
