Vue3中如何实现a.vue中4个element plus button，选择哪一个哪一个就高亮，同时点击兄弟组件b.vue中的内容不影响按钮高亮

可以使用Vue3的`provide`和`inject` API来实现这个功能。

首先，在a.vue中定义一个`selected`变量来保存当前选中的按钮：

<template>
  <div>
    <el-button v-for="button in buttons" :class="{active: button === selected}" @click="select(button)">{{ button }}</el-button>
  </div>
</template>

<script>
import { ref, provide } from 'vue';

export default {
  setup() {
    const buttons = ['Button1', 'Button2', 'Button3', 'Button4'];
    const selected = ref(buttons[0]);

    const select = (button) => {
      selected.value = button;
    };

    provide('selected', selected);

    return {
      buttons,
      selected,
      select,
    };
  },
};
</script>

<style>
.active {
  background-color: #409EFF;
  color: #fff;
}
</style>

在这个组件中，我们使用了`ref`来定义了一个`selected`变量，并且使用`provide`将其提供给了所有子组件。

然后，在b.vue中使用`inject`来获取`selected`变量，然后在点击事件中修改这个变量：

<template>
  <div>
    <div v-for="item in items" @click="select(item)">{{ item }}</div>
  </div>
</template>

<script>
import { inject } from 'vue';

export default {
  setup() {
    const selected = inject('selected');

    const select = (item) => {
      selected.value = item;
    };

    return {
      items: ['Item1', 'Item2', 'Item3', 'Item4'],
      select,
    };
  },
};
</script>

在这个组件中，我们使用了`inject`来获取`selected`变量，并且在点击事件中修改了这个变量的值。由于这个变量是响应式的，所以a.vue中的按钮会自动更新高亮状态。

最后，我们可以使用样式来定义高亮状态：

.active {
  background-color: #409EFF;
  color: #fff;
}