举例说明，vue如何实现多个按钮控制同一个组件，且每个按钮控制展示不同的内容

Vue可以通过使用条件渲染和事件绑定来实现多个按钮控制同一个组件，且每个按钮控制展示不同的内容。以下是一个简单的示例：

首先，我们需要创建一个展示内容的组件（Content），该组件根据传入的参数来展示不同的内容。

<!-- Content.vue -->
<template>
  <div class="content">
    <div v-if="selectedTab === 'tab1'">
      <h2>Tab 1</h2>
      <p>这是第一个标签页的内容。</p>
    </div>
    <div v-else-if="selectedTab === 'tab2'">
      <h2>Tab 2</h2>
      <p>这是第二个标签页的内容。</p>
    </div>
    <div v-else-if="selectedTab === 'tab3'">
      <h2>Tab 3</h2>
      <p>这是第三个标签页的内容。</p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    selectedTab: {
      type: String,
      required: true,
    },
  },
};
</script>

<style scoped>
.content {
  margin-top: 20px;
}
</style>

在父组件中，我们可以使用一个变量来控制当前选中的标签页，并使用不同的按钮来切换选中的标签页。

<template>
  <div>
    <button @click="selectedTab = 'tab1'">Tab 1</button>
    <button @click="selectedTab = 'tab2'">Tab 2</button>
    <button @click="selectedTab = 'tab3'">Tab 3</button>
    <Content :selectedTab="selectedTab" />
  </div>
</template>

<script>
import Content from './Content.vue';

export default {
  components: {
    Content,
  },
  data() {
    return {
      selectedTab: 'tab1',
    };
  },
};
</script>

在上面的示例中，父组件中有三个按钮，每个按钮通过点击事件绑定的方式来更新selectedTab的值，从而控制Content组件展示不同的内容。

这样，当点击不同的按钮时，selectedTab的值会改变，Content组件会根据selectedTab的值来渲染不同的内容。你可以根据需要添加更多的按钮和对应的内容，或者根据实际需求自定义组件的样式和行为。