vue如何实现封装
Vue 组件封装方法
封装 Vue 组件可以提高代码复用性、降低耦合度。以下是几种常见的封装方式：
基础组件封装
创建 .vue 文件，包含 template、script 和 style 三部分：
<template>
<div class="custom-component">
<button @click="handleClick">{{ buttonText }}</button>
</div>
</template>
<script>
export default {
props: {
buttonText: {
type: String,
default: 'Click me'
}
},
methods: {
handleClick() {
this.$emit('custom-event', 'event data')
}
}
}
</script>
<style scoped>
.custom-component {
margin: 10px;
}
</style>高阶组件封装
使用 render 函数或 extends 实现更灵活的封装：
const withLogging = (WrappedComponent) => {
return {
mounted() {
console.log('Component mounted')
},
render(h) {
return h(WrappedComponent, {
on: this.$listeners,
attrs: this.$attrs,
scopedSlots: this.$scopedSlots
})
}
}
}指令封装 封装自定义指令：
Vue.directive('focus', {
inserted(el) {
el.focus()
}
})插件封装 将一组组件或功能封装为插件：
const MyPlugin = {
install(Vue) {
Vue.component('MyComponent', {
template: '<div>Plugin Component</div>'
})
}
}
Vue.use(MyPlugin)混入封装 使用 mixin 封装可复用逻辑：
const myMixin = {
data() {
return {
mixinData: 'Mixin Data'
}
},
methods: {
mixinMethod() {
console.log(this.mixinData)
}
}
}封装最佳实践
- 遵循单一职责原则，每个组件只做一件事
- 合理使用 props 和 events 进行父子通信
- 使用插槽（slot）实现内容分发
- 为组件添加必要的 prop 验证
- 使用 provide/inject 实现跨层级通信
- 考虑使用 Composition API 封装逻辑
组件通信方式
- Props/Events：基础父子通信
- v-model：双向绑定简化
- $refs：直接访问组件实例
- Event Bus：全局事件总线
- Vuex/Pinia：状态管理
- provide/inject：依赖注入
示例：表单组件封装
<template>
<form @submit.prevent="handleSubmit">
<slot name="header"></slot>
<div v-for="field in fields" :key="field.name">
<label :for="field.name">{{ field.label }}</label>
<input
:type="field.type"
:id="field.name"
v-model="formData[field.name]"
:required="field.required"
>
</div>
<slot name="footer"></slot>
</form>
</template>
<script>
export default {
props: {
fields: {
type: Array,
required: true
},
initialData: {
type: Object,
default: () => ({})
}
},
data() {
return {
formData: { ...this.initialData }
}
},
methods: {
handleSubmit() {
this.$emit('submit', this.formData)
}
}
}
</script>
