可以通过在父
组件中维护一个状态来实现。具体步骤如下：
1. 在父
组件中定义一个变量 `activeComponent` ，用于表示当前激活的
组件。
2. 在父
组件中定义一个方法 `setActiveComponent` ，用于改变 `activeComponent` 的值。
3. 在父
组件的模板
中使用 `v-if` 条件渲染，根据 `activeComponent` 的值来控制
组件的显示和
隐藏。
4. 在子
组件中添加一个 `click` 事件，当
点击该
组件时，调用父
组件的 `setActiveComponent` 方法，将 `activeComponent` 的值设置为当前
组件的名称。
下面是一个示例代码：
Parent.
vue：
```
<template>
<div>
<button @click="setActiveComponent('ComponentA')">ComponentA</button>
<button @click="setActiveComponent('ComponentB')">ComponentB</button>
<button @click="setActiveComponent('ComponentC')">ComponentC</button>
<button @click="setActiveComponent('ComponentD')">ComponentD</button>
<component-a v-if="activeComponent === 'ComponentA'" />
<component-b v-if="activeComponent === 'ComponentB'" />
<component-c v-if="activeComponent === 'ComponentC'" />
<component-d v-if="activeComponent === 'ComponentD'" />
</div>
</template>
<script>
import ComponentA from './ComponentA.
vue'
import ComponentB from './ComponentB.
vue'
import ComponentC from './ComponentC.
vue'
import ComponentD from './ComponentD.
vue'
export default {
components: {
ComponentA,
ComponentB,
ComponentC,
ComponentD,
},
data() {
return {
activeComponent: 'ComponentA', // 默认显示 ComponentA
}
},
methods: {
setActiveComponent(componentName) {
this.activeComponent = componentName
},
},
}
</script>
```
ComponentA.
vue：
```
<template>
<div @click="selectComponent">ComponentA</div>
</template>
<script>
export default {
methods: {
selectComponent() {
this.$emit('component-selected', 'ComponentA')
},
},
}
</script>
```
ComponentB.
vue：
```
<template>
<div @click="selectComponent">ComponentB</div>
</template>
<script>
export default {
methods: {
selectComponent() {
this.$emit('component-selected', 'ComponentB')
},
},
}
</script>
```
ComponentC.
vue：
```
<template>
<div @click="selectComponent">ComponentC</div>
</template>
<script>
export default {
methods: {
selectComponent() {
this.$emit('component-selected', 'ComponentC')
},
},
}
</script>
```
ComponentD.
vue：
```
<template>
<div @click="selectComponent">ComponentD</div>
</template>
<script>
export default {
methods: {
selectComponent() {
this.$emit('component-selected', 'ComponentD')
},
},
}
</script>
```
在子
组件中，我们添加了一个 `click` 事件，并且在该事件
中通过 `$emit` 方法向父
组件发送了一个 `component-selected` 事件，同时传递了当前
组件的名称。父
组件在监听到 `component-selected` 事件后，就会调用 `setActiveComponent` 方法，将 `activeComponent` 的值设置为当前
组件的名称，从而控制
组件的显示和
隐藏。
871
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
