Vue组件技术全解析大纲

目录

01-全局组件

02-局部组件

03-组件属性

04-组件事件

05-组件插槽

06-生命周期

07-样式隔离

08-组件测试

09-组件发布

10-组件使用

开发优先级矩阵

01-全局组件

// 全局注册示例
Vue.component('global-button', {
  template: `<button :style="btnStyle"><slot>默认按钮</slot></button>`,
  props: {
    color: { type: String, default: '#409EFF' }
  },
  computed: {
    btnStyle() {
      return { backgroundColor: this.color }
    }
  }
})

代码解释：全局组件通过Vue.component()注册，可在任意组件中直接使用。props定义颜色属性，computed生成动态样式
优先级：适合基础组件库开发，建议控制全局组件数量（<5个）

02-局部组件

// 局部注册示例
const LocalTable = {
  props: ['columns'],
  template: `<table><tr v-for="col in columns"><td>{{col}}</td></tr></table>`
}

new Vue({
  components: { LocalTable }
})

代码解释：通过components选项局部注册，使用限制性作用域。v-for循环生成表格列
优先级：项目级组件推荐方式，按需加载减少体积

03-组件属性

props: {
  // 类型验证
  width: { type: Number, required: true },
  // 自定义验证
  status: {
    validator: v => ['loading', 'ready'].includes(v)
  }
}

代码解释：采用对象形式定义props，required强制要求输入，validator自定义验证逻辑
优先级：必须优先定义清晰props接口，建议添加完整类型验证

04-组件事件

// 事件触发
this.$emit('page-change', newPage)

// 事件监听
<Paginator @page-change="handleChange"/>

代码解释：使用$emit触发自定义事件，事件命名建议kebab-case。父组件通过@监听
优先级：事件定义应早于组件实现，复杂组件建议使用v-model语法糖

05-组件插槽

<!-- 作用域插槽 -->
<template v-slot:item="slotProps">
  <div>{{ slotProps.item.name }}</div>
</template>

<!-- 插槽定义 -->
<slot name="item" :item="currentItem"></slot>

代码解释：具名插槽实现内容分发，作用域插槽实现数据反向传递
优先级：优先使用默认插槽，复杂布局采用具名插槽

06-生命周期

export default {
  beforeCreate() {}, // 初始化前
  mounted() { // DOM挂载完成
    this.fetchData()
  },
  beforeDestroy() { // 组件销毁前
    this.clearTimer()
  }
}

优先级：重要程度排序：mounted > beforeDestroy > updated > errorCaptured

07-样式隔离

<style scoped>
.button { /* 仅作用于当前组件 */ }
</style>

<!-- CSS Modules -->
<style module>
.success { color: green }
</style>

代码解释：scoped属性实现样式隔离，CSS Modules通过$style对象访问
优先级：必须使用样式隔离方案，推荐scoped+CSS Modules组合

08-组件测试

// 单元测试示例
test('should render props', async () => {
  const wrapper = mount(Component, {
    propsData: { title: 'Test' }
  })
  expect(wrapper.text()).toContain('Test')
})

优先级：核心组件>业务组件>工具组件，测试覆盖率目标：核心100%，业务70%

09-组件发布

# 发布流程
npm login
npm version patch
npm publish --access public

发布规范：版本号遵循semver规范，必须包含：

• 完整文档
• TypeScript定义
• 按需加载支持

10-组件使用

// 按需引入
import { DatePicker } from 'element-ui'

// 全局配置
Vue.use(DatePicker, { locale })

最佳实践：

1. 基础UI组件全局注册
2. 业务组件局部注册
3. 第三方组件按需加载

开发优先级矩阵

实际开发中建议遵循：接口设计（props/events）→核心功能→样式→测试的递进式开发流程，采用Storybook驱动开发模式可提升效率30%以上