一个vue页面复用方案

在Vue中，复用组件可以通过以下几种方式实现：

1. 使用组件：创建可复用的组件，并在需要的地方引用该组件。
2. 使用插槽（Slots）：通过插槽可以在父组件中定义可复用的区域。
3. 使用动态组件：通过 <component> 元素和 is 特性动态地切换不同的组件。
4. 使用Vuex或者Provide/Inject：管理全局状态或者作用域，在多个组件间共享状态。

以下是一个使用组件复用的简单例子：

<!-- 可复用的组件 MyComponent.vue -->
<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>
 
<script>
export default {
  props: ['title', 'content'],
};
</script>
 
<!-- 使用组件的页面 -->
<template>
  <div>
    <my-component title="Hello" content="This is a reusable component." />
    <my-component title="Hi" content="This is another reusable component." />
  </div>
</template>
 
<script>
import MyComponent from './MyComponent.vue';
 
export default {
  components: {
    MyComponent
  }
};
</script>

在这个例子中，MyComponent.vue 是一个可复用的组件，它接受 title 和 content 作为 props。在父组件中，我们引用了两次 MyComponent 组件，并传递了不同的 props 数据。这样，MyComponent 就被复用了两次，显示了不同的内容。