《vue3封装组件方法》

在Vue3项目开发中，封装组件能够提高代码的复用性和可维护性。解决方案是遵循Vue3的组合式API和单文件组件（SFC）规范，将具有相同功能或结构的部分提取出来，形成独立的组件，并且确保组件具有良好的输入输出接口。

一、基于props和emit封装简单组件

这是最基础也是最常见的封装方式。例如要封装一个按钮组件。

vue
<!-- ButtonComponent.vue -->

  <button>
    {{ text }}
  </button>
</p>


import { defineProps, defineEmits } from 'vue'
const props = defineProps({
  text: {
    type: String,
    default: '默认按钮'
  },
  type: {
    type: String,
    default: 'default'
  }
})
const emit = defineEmits(['click'])
const btnClass = `btn-${props.type}`
const handleClick = () => {
  emit('click')
}



.btn-default{
  /* 默认样式 */
}
/* 可以根据type定义不同的样式类 */


<p>

在使用时：
vue <ButtonComponent text="确定" type="primary" @click="confirmAction"/>

二、利用插槽增强组件灵活性

有时候我们需要让组件内部的内容可以被外部自定义，就可以使用插槽。

vue
<!-- CardComponent.vue -->

  <div class="card">
    <header>
      
    </header>
    <main>
      
    </main>
    <footer>
      
    </footer>
  </div>
</p>


// 这里可以根据需要定义一些逻辑



.card{/* 样式 */}


<p>

使用：
vue <CardComponent> <template #header> <h2>卡片标题</h2> </template> <p>卡片内容</p> <template #footer> <ButtonComponent text="操作按钮"/> </template> </CardComponent>

三、组合多个小组件为复杂组件

如果有一个复杂的表单组件需求，可以先封装好各个小部件如输入框组件、选择框组件等，然后再组合起来。

vue
<!-- InputComponent.vue -->

  
</p>


import { defineProps, defineEmits } from 'vue'
const props = defineProps({
  modelValue: String
})
const emit = defineEmits(['update:modelValue'])
const updateValue = (e) => {
  emit('update:modelValue', e.target.value)
}


<p>

然后创建表单组件：
```vue

import { ref } from 'vue'
const formData = ref({
name: ''
})
const handleSubmit = () => {
// 表单提交逻辑
}

```

通过以上几种思路，我们可以根据实际需求灵活地封装Vue3组件，使项目更加高效地构建。