vue实现组件封装
Vue 组件封装方法
封装组件的基本步骤
创建独立的 .vue 文件，包含 template、script 和 style 三个部分。通过 props 接收父组件传递的数据，使用 $emit 触发自定义事件向父组件通信。
使用 props 传递数据
在子组件中定义 props 接收父组件传递的数据，支持类型验证和默认值设置。
props: {
title: {
type: String,
required: true
},
count: {
type: Number,
default: 0
}
}触发自定义事件
通过 $emit 方法触发事件，父组件可以通过 v-on 监听这些事件。
methods: {
handleClick() {
this.$emit('custom-event', payload)
}
}插槽使用
使用 <slot> 标签实现内容分发，支持默认插槽和具名插槽。
<div class="container">
<slot name="header"></slot>
<slot></slot>
</div>作用域插槽
子组件可以通过插槽 prop 将数据传递给父组件。
<slot name="item" v-bind:item="itemData"></slot>v-model 实现
通过 model 选项和 $emit('input') 可以实现自定义组件的双向绑定。
model: {
prop: 'value',
event: 'change'
}Mixins 复用逻辑
将可复用的逻辑提取到 mixin 中，多个组件可以混入相同的功能。
const myMixin = {
created() {
this.hello()
},
methods: {
hello() {
console.log('hello from mixin!')
}
}
}provide/inject
祖先组件通过 provide 提供数据，后代组件通过 inject 注入数据，适合深层嵌套组件通信。
provide() {
return {
theme: this.theme
}
}渲染函数
使用 render 函数可以更灵活地控制组件渲染，适合动态生成复杂组件结构。
render(h) {
return h('div', this.$slots.default)
}函数式组件
无状态、无实例的组件，性能更高，适合纯展示型组件。
Vue.component('functional-button', {
functional: true,
render(h, context) {
return h('button', context.data, context.children)
}
})最佳实践建议
组件命名采用 PascalCase 或 kebab-case 风格，保持单一职责原则，合理划分组件粒度。对于通用组件，应该提供详细的文档说明 props、events 和 slots 的用法。
