VueJS -单击时交换组件
VueJS -单击时交换组件
提问于 2016-09-08 20:40:23
在我的应用程序中，我有很多按钮。当我按下该按钮时，我想加载一个模板(它将替换所选的按钮)：
模板：
Vue.component('component-1', {...});
Vue.component('component-2', {...});按钮：
<div id="toReplace">
<button>Button1</button>
<button>Button2</button>
</div>在本例中，当我按Button1时，div toReplace的内容应该是component-1。当然，每个组件都应该有一个“关闭”按钮，该按钮将在按下时再次显示按钮(简而言之，div toReplace)。
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-09-08 21:37:54
您需要将变量绑定到: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
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39391218
复制相关文章
相似问题
腾讯云开发者
