Question

在我的应用程序中，我有很多按钮。当我按下按钮时，我想加载一个模板（替换所选按钮）：

模板：

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）。

Answer 1

您需要将变量绑定到: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

VueJS - 点击时交换组件

1 个答案: