vue实现点击不同按钮，显示同一个组件，但是组件的内容随着按钮的变化而变化，请举例说明一下

要实现点击不同按钮，显示同一个组件，但组件的内容随按钮变化而变化，可以使用动态props属性将不同的内容传递给组件，然后根据props属性在组件中显示不同的内容。

在父组件中，定义一个变量来保存当前选中的按钮索引，例如`selectedButtonIndex`。然后，在点击事件的处理函数中设置`selectedButtonIndex`为对应的按钮索引。最后，将`selectedButtonIndex`通过props传递给子组件，并根据该值在子组件中显示不同的内容。

示例代码如下：

<template>
  <div>
    <button @click="handleClick(0)">Button 1</button>
    <button @click="handleClick(1)">Button 2</button>
    <button @click="handleClick(2)">Button 3</button>
    <ChildComponent :selectedButtonIndex="selectedButtonIndex" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      selectedButtonIndex: null
    };
  },
  methods: {
    handleClick(index) {
      this.selectedButtonIndex = index;
    }
  }
};
</script>

在子组件中，接收父组件传递的`selectedButtonIndex`作为props，并根据该值显示不同的内容。

子组件的示例代码如下：

<template>
  <div>
    <p v-if="selectedButtonIndex === 0">Content for Button 1</p>
    <p v-if="selectedButtonIndex === 1">Content for Button 2</p>
    <p v-if="selectedButtonIndex === 2">Content for Button 3</p>
  </div>
</template>

<script>
export default {
  props: {
    selectedButtonIndex: {
      type: Number,
      default: null
    }
  }
};
</script>

这样，当在父组件中点击不同的按钮时，子组件中会根据选中的按钮索引显示不同的内容。