vue的组件复用

在Vue.js中，模板（template）插槽是一种实现组件内容动态替换的方法，从而使组件具有更强的复用性。以下是一个使用模板插槽实现组件复用的例子：

1. 首先，创建一个基础组件，如BaseComponent，它包含一个<template>标签，用于存放可复用的代码：

<template>
  <div class="base-component">
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    content: {
      type: String,
      default: ''
    }
  }
}
</script>
<style scoped>
.base-component {
  color: blue;
  font-size: 16px;
}
</style>

2. 接下来，创建一个复用组件，如DerivedComponent，它继承自BaseComponent，并使用<template>标签接收来自父组件的插槽内容：

<template>
  <div class="derived-component">
    <BaseComponent>
      <template v-slot="{ title, content }">
        <h1>{{ title }}</h1>
        <p>{{ content }}</p>
        <p>这是额外的内容，只在DerivedComponent中显示</p>
      </template>
    </BaseComponent>
  </div>
</template>
<script>
import BaseComponent from './BaseComponent.vue';
export default {
  extends: BaseComponent,
  props: BaseComponent.props
}
</script>
<style scoped>
.derived-component {
  color: green;
  font-size: 18px;
}
</style>

3. 最后，在父组件中使用DerivedComponent，并传递标题和内容：

<template>
  <div>
    <DerivedComponent title="组件标题" content="组件内容" />
  </div>
</template>
<script>
import DerivedComponent from './DerivedComponent.vue';
export default {
  components: {
    DerivedComponent
  }
}
</script>

在这个例子中，我们使用<template>插槽实现了组件内容的动态替换，使得DerivedComponent可以复用BaseComponent的布局和样式，同时添加了自己的独特内容。这样，我们在开发过程中可以更加灵活地组织和复用代码，提高开发效率。