vue中如何使4个组件页面中每次仅选择显示一个组件，选择一个组件后，其他组件自动隐藏

可以通过在父组件中维护一个状态来实现。具体步骤如下：

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` 的值设置为当前组件的名称，从而控制组件的显示和隐藏。