【vue3】组件的二次封装

🐱 个人主页：TechCodeAI启航，公众号：SHOW科技

🙋‍♂️ 作者简介：2020参加工作，专注于前端各领域技术，共同学习共同进步，一起加油呀！

💫 优质专栏：前端主流技术分享

📢 资料领取：前端进阶资料可以找我免费领取

🔥 摸鱼学习交流：我们的宗旨是在「工作中摸鱼，摸鱼中进步」，期待大佬一起来摸鱼！

在Vue 3中，可以通过二次封装组件来对组件进行定制化的扩展和封装。以下是一个简单的示例，演示如何使用Vue 3的Composition API来进行组件的二次封装。

首先，创建一个基础组件 BaseComponent.vue：

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

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'BaseComponent',
});
</script>

<style scoped>
/* 样式 */
</style>

然后，在需要进行二次封装的组件中引入 BaseComponent 组件，并进行定制化的扩展。

<template>
  <div>
    <!-- 使用BaseComponent作为父组件 -->
    <BaseComponent>
      <!-- 扩展的内容 -->
      <h1>{{ title }}</h1>
      <p>{{ description }}</p>
      <button @click="handleClick">Click me</button>
    </BaseComponent>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import BaseComponent from './BaseComponent.vue';

export default defineComponent({
  components: {
    BaseComponent,
  },
  data() {
    return {
      title: 'Hello',
      description: 'This is a custom component',
    };
  },
  methods: {
    handleClick() {
      console.log('Button clicked');
    },
  },
});
</script>

<style scoped>
/* 样式 */
</style>

这样，通过使用 BaseComponent 作为父组件，可以在其中添加需要的定制化内容，并且可以在父组件中定义相关的数据和方法。

这种方式可以让我们在编写组件时更加灵活，可以根据实际需求进行定制化扩展，提高组件的可复用性和可维护性。