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 的用法。