点击切换vue组件

温馨提示：这篇文章已超过239天没有更新，请注意相关的内容是否还可用！

点击切换Vue组件是一种常见的交互方式，它可以使用户在页面上进行不同组件的切换，以达到不同的功能或展示效果。在Vue中，我们可以通过使用v-if或v-show指令来实现点击切换组件的效果。

我们需要在Vue实例中定义一个数据属性，用于控制组件的显示与隐藏。例如，我们定义一个名为showComponent的数据属性，并将其初始值设置为true，表示初始状态下组件是显示的。


<template>
  <div>
    <button @click="toggleComponent">切换组件</button>
    <div v-if="showComponent">
      <ComponentA></ComponentA>
    </div>
    <div v-else>
      <ComponentB></ComponentB>
    </div>
  </div>
</template>
<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'
export default {
  data() {
    return {
      showComponent: true
    }
  },
  components: {
    ComponentA,
    ComponentB
  },
  methods: {
    toggleComponent() {
      this.showComponent = !this.showComponent
    }
  }
}
</script>

在上述示例代码中，我们通过v-if指令来根据showComponent的值判断是否显示ComponentA组件。当showComponent为true时，ComponentA组件会被渲染到页面上；当showComponent为false时，ComponentB组件会被渲染到页面上。通过点击按钮，我们可以调用toggleComponent方法来切换showComponent的值，从而实现组件的切换。

除了使用v-if指令，我们还可以使用v-show指令来实现点击切换组件的效果。v-show指令与v-if指令的区别在于，v-show只是通过CSS的display属性来控制组件的显示与隐藏，而v-if是通过DOM的插入与移除来控制组件的显示与隐藏。当组件需要频繁切换时，使用v-show指令会比v-if指令性能更好。

下面是使用v-show指令实现点击切换组件的示例代码：


<template>
  <div>
    <button @click="toggleComponent">切换组件</button>
    <div v-show="showComponent">
      <ComponentA></ComponentA>
    </div>
    <div v-show="!showComponent">
      <ComponentB></ComponentB>
    </div>
  </div>
</template>
<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'
export default {
  data() {
    return {
      showComponent: true
    }
  },
  components: {
    ComponentA,
    ComponentB
  },
  methods: {
    toggleComponent() {
      this.showComponent = !this.showComponent
    }
  }
}
</script>

在上述示例代码中，我们通过v-show指令来根据showComponent的值控制ComponentA和ComponentB组件的显示与隐藏。当showComponent为true时，ComponentA组件会显示；当showComponent为false时，ComponentB组件会显示。通过点击按钮，我们可以调用toggleComponent方法来切换showComponent的值，从而实现组件的切换。

点击切换vue组件

相关阅读