什么是组件？

组件是 Vue.js 中可复用的独立模块，用于构建用户界面。
通过组件，你可以将功能、样式和逻辑封装，实现代码解耦与高效维护。
✅ 核心价值：

  • 提高开发效率
  • 便于团队协作
  • 降低代码冗余
Vue_Component

组件开发基础

1. 组件创建方式

  • 单文件组件（.vue 文件） 
    <template>
  <div>组件内容</div>
</template>
<script>
export default {
  name: 'MyComponent',
  data() { return { msg: 'Hello Vue!' } }
}
</script>
  • 注册组件 
    // 全局注册
Vue.component('my-component', {
  template: '<p>全局组件</p>'
})

// 局部注册
components: {
  'my-component': {
    template: '<p>局部组件</p>'
  }
}

2. props 传递数据

使用 props 实现父子组件通信： 

props: ['title', 'count']

📦 数据流向：父组件 → 子组件
🤝 注意事项：

  • 数据是单向流动的
  • 使用 v-bind 动态绑定值
Component_Creation

高级技巧

1. 组件通信

  • 父子通信：$emit + props
  • 兄弟通信：事件总线（EventBus）
  • 全局状态管理：VueX（了解更多）

2. 生命周期钩子

⏳ 常见钩子：

  • created()：组件创建时调用
  • mounted()：挂载到 DOM 后调用
  • updated()：数据更新时调用
  • beforeDestroy()：销毁前调用

3. 插槽（Slots）

自定义组件内容区域： 

<template>
  <div>
    <slot>默认内容</slot>
  </div>
</template>

📌 作用：允许用户替换组件内部的特定部分

Component_Communication

最佳实践

  • 使用 keep-alive 缓存动态组件（点击查看）
  • 通过 mixins 复用逻辑
  • 遵循组件命名规范（如 BaseInput、UserCard）

🚀 优化建议：

  • 避免在 template 中使用复杂逻辑
  • 合理使用 v-model 实现双向绑定
Component_Lifecycle

扩展学习

Component_Optimization