<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>
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
}
})
vue 动态插入组件实例
猜你喜欢
转载自blog.csdn.net/qwe435541908/article/details/90599436
今日推荐
周排行