vue中怎么实现一个组件的结构不变，组件中显示的内容随着按钮的点击切换内容

要实现一个组件的结构不变，但是组件中显示的内容随着按钮的点击而切换，可以使用Vue的插槽（slot）功能。

首先，在组件的模板中定义一个插槽，用来接收不同内容的组件。例如：

<template>
  <div>
    <slot></slot>
  </div>
</template>

然后，在父组件中使用该自定义组件，并在其中放置不同内容的组件。例如：

<template>
  <div>
    <button @click="showComponent('content1')">内容1</button>
    <button @click="showComponent('content2')">内容2</button>
    <button @click="showComponent('content3')">内容3</button>

    <my-component>
      <div v-if="currentComponent === 'content1'">这是内容1</div>
      <div v-if="currentComponent === 'content2'">这是内容2</div>
      <div v-if="currentComponent === 'content3'">这是内容3</div>
    </my-component>
  </div>
</template>

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

export default {
  components: {
    MyComponent
  },
  data() {
    return {
      currentComponent: 'content1'
    };
  },
  methods: {
    showComponent(component) {
      this.currentComponent = component;
    }
  }
};
</script>

在上述代码中，我们定义了三个按钮，每个按钮绑定了一个点击事件`showComponent`，通过点击按钮来切换`currentComponent`的值。

然后，我们使用自定义组件`my-component`，并在其中通过插槽的方式放置了不同内容的组件。使用`v-if`指令来根据`currentComponent`的值来判断显示哪个内容。

这样，当点击不同的按钮时，组件中显示的内容会根据`currentComponent`的值进行切换，而组件的结构保持不变。