vue定义三个子组件，在父组件实现点击时间切换子组件

在Vue中，可以通过父组件向子组件传递数据来实现组件间的通信。为了实现点击事件切换子组件，可以在父组件中定义一个变量来表示当前显示的子组件，然后通过v-if或v-show指令来控制子组件的显示和隐藏。当点击切换按钮时，可以通过修改这个变量的值来切换子组件的显示。

具体实现步骤如下：
1. 在父组件中定义三个子组件，并定义一个变量current来表示当前显示的子组件。
2. 在父组件中实现一个方法，用来切换子组件。该方法会接收一个参数，用来指定要显示的子组件。
3. 在父组件的模板中，使用v-if或v-show指令来控制子组件的显示和隐藏。根据current变量的值来判断哪个子组件应该显示。
4. 在子组件中使用props来接收父组件传递过来的数据。

代码示例：

<template>
  <div>
    <button @click="switchComponent(1)">子组件1</button>
    <button @click="switchComponent(2)">子组件2</button>
    <button @click="switchComponent(3)">子组件3</button>
    <component v-if="current === 1" :is="component1"></component>
    <component v-if="current === 2" :is="component2"></component>
    <component v-if="current === 3" :is="component3"></component>
 </div>
</template>

<script>
import Component1 from './Component1.vue'
import Component2 from './Component2.vue'
import Component3 from './Component3.vue'

export default {
  components: {
    Component1,
    Component2,
    Component3
  },
  data() {
    return {
      current: 1,
      component1: 'Component1',
      component2: 'Component2',
      component3: 'Component3'
    }
  },
  methods: {
    switchComponent(index) {
      this.current = index
    }
  }
}
</script>

// 子组件示例
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: {
    message: String
  }
}
</script>

--相关问题--: