VueJS - 点击切换组件

Question

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

模板：

Vue.component('component-1', {...});
Vue.component('component-2', {...});

按钮：

<div id="toReplace">
  <button>Button1</button>
  <button>Button2</button>
</div>

在这种情况下，当我按下 Button1 时， toReplace div的内容应该是 component-1 。当然，每个组件都应该有一个“关闭”按钮，按下该按钮将再次显示按钮（简言之， toReplace div）。

- Mistre83

Answer 1

你需要将一个变量绑定到 :is 属性上，并在按钮点击时更改此变量的值。还需与某些 v-show 条件结合使用。像这样：

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

- GONG

---

你如何在这个方法中向组件传递 props？ - srik

@srik 如果你想传递动态属性，你需要使用v-bind而不带参数，并提供一个包含属性名称和值的对象来证明它。 - sepehr

Answer 2

你可以使用 v-bind:is="CurrentComponent" 和 @click=ChangeComponent('SecondComponent')。 参数必须是一个字符串。要使用 <component/>，请确保你的ExampleComponent有一个插槽

<Template>
  <div>
    <ExampleComponent>
      <component v-bind:is = "CurrentComponent"/>
    </ExampleCompoent>
    <button @click="ChangeComponent('SecondComponent')">
    </button>
  </div>
</template>

<script>
  import ExampleComponent from '@/components/ExampleComponent.vue'
  import SecondComponent from '@/components/SecontComponent.vue'
  export default{
    ...
    data(){
      return{
        CurrentComponet:null
      }
    }
    methods:{
      ChangeComponent(NewComponent){
        this.CurrentComponent = NewComponent
    }

- AntonioVivas