Vue.js实现动态组件
Vue.component('demo', {
template: '#demo',
data: function () {
return {
currentView: 'default'
}
},
components: {
default: {
template: '默认组件'
},
foo: {
template: 'Foo组件'
},
bar: {
template: 'Bar组件'
}
},
methods: {
switchView: function (view) {
this.currentView = view;
}
}
});
new Vue({
el: '#app'
});
HTML
<div id="app">
<button v-on:click="switchView('default')">默认</button>
<button v-on:click="switchView('foo')">Foo</button>
<button v-on:click="switchView('bar')">Bar</button>
<component v-bind:is="currentView"></component>
</div>
<template id="demo">
<div>
<component v-bind:is="currentView"></component>
</div>
</template>