您需要将一个变量绑定到:is
属性.点击按钮改变这个变量.此外,你还需要结合一些v-show
条件.就像这样:
<div id="toReplace">
<div :is="currentComponent"></div>
<div v-show="!currentComponent" v-for="component in componentsArray">
<button @click="swapComponent(component)">{{component}}</button>
</div>
</div>
<button @click="swapComponent(null)">Close</button>
new Vue({
el: 'body',
data: {
currentComponent: null,
componentsArray: ['foo', 'bar']
},
components: {
'foo': {
template: '<h1>Foo component</h1>'
},
'bar': {
template: '<h1>Bar component</h1>'
}
},
methods: {
swapComponent: function(component)
{
this.currentComponent = component;
}
}
});
下面是一个简单的例子:
http://jsbin.com/miwuduliyu/edit?html,js,console,output