vue点击按钮切换子组件

好的，下面是一个示例代码，演示如何在 Vue 中点击按钮切换子组件：

<template>
  <div>
    <button @click="toggleComponent">切换子组件</button>
    <component :is="currentComponent"></component>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

export default {
  components: {
    ComponentA,
    ComponentB
  },
  data() {
    return {
      currentComponent: 'ComponentA'
    }
  },
  methods: {
    toggleComponent() {
      if (this.currentComponent === 'ComponentA') {
        this.currentComponent = 'ComponentB'
      } else {
        this.currentComponent = 'ComponentA'
      }
    }
  }
}
</script>

在上面的代码中，我们先在父组件中引入了两个子组件 ComponentA 和 ComponentB，然后在 data 中定义了一个叫做 `currentComponent` 的变量，初始值为 ComponentA。在父组件的模板中，我们使用了一个按钮，并且通过 `@click` 监听点击事件，从而触发 `toggleComponent` 方法。在 `toggleComponent` 方法中，我们通过判断 `currentComponent` 的值，从而动态切换子组件。最后，我们在 `<component>` 标签中使用了 `:is` 属性来动态绑定子组件，实现了点击按钮切换子组件的效果。

希望这个示例代码能够帮助到你！