vue实现组件封装
Vue 组件封装方法
基础组件封装
创建 .vue 单文件组件，包含 <template>、<script> 和 <style> 三部分。通过 props 接收父组件传递的数据，通过 $emit 触发自定义事件。
<template>
<div class="custom-button" @click="handleClick">
{{ buttonText }}
</div>
</template>
<script>
export default {
name: 'CustomButton',
props: {
buttonText: {
type: String,
default: 'Click Me'
}
},
methods: {
handleClick() {
this.$emit('button-click')
}
}
}
</script>
<style scoped>
.custom-button {
padding: 8px 16px;
background-color: #42b983;
color: white;
border-radius: 4px;
cursor: pointer;
}
</style>插槽使用
通过 <slot> 实现内容分发，增强组件灵活性。具名插槽可用于多个插槽位置。
<template>
<div class="card">
<div class="card-header" v-if="$slots.header">
<slot name="header"></slot>
</div>
<div class="card-content">
<slot></slot>
</div>
</div>
</template>组件通信
父组件通过 v-model 实现双向绑定，子组件使用 model 选项自定义。
<script>
export default {
name: 'CustomInput',
model: {
prop: 'value',
event: 'input'
},
props: {
value: String
},
methods: {
updateValue(e) {
this.$emit('input', e.target.value)
}
}
}
</script>高阶组件
使用 render 函数或 functional 特性创建无状态组件，提高性能。
export default {
functional: true,
render(h, { props, children }) {
return h('div', { class: 'functional-component' }, children)
}
}全局注册
在入口文件通过 Vue.component 全局注册常用组件。
import Vue from 'vue'
import CustomButton from './components/CustomButton.vue'
Vue.component('CustomButton', CustomButton)组件复用技巧
使用 mixins 提取公共逻辑，通过 provide/inject 实现跨层级组件通信。
const formMixin = {
methods: {
validate() {
// 公共验证逻辑
}
}
}
export default {
mixins: [formMixin]
}最佳实践
遵循单一职责原则，每个组件只做一件事。合理使用 scoped 样式避免污染。通过 prop 验证和默认值提高组件健壮性。组件命名采用 PascalCase 规范。
