如何开发Vue组件

目录

组件化

组件封装的思路

组件的三个核心API

prop

event

slot

组件之间的通信

知识点以Vue2.x为准

组件化

Vue官网简介叫做渐进式的JavaScript框架，其中组件化的开发模式是其中非常重要的原因。

当我们在开发项目中的某个功能时，往往会伴随着业务需求的不断增加，导致原本干净整洁的代码越来越冗余，不断的加入的变量和注释、不断新增的逻辑判断，往往让其他接手的开发人员望而却步，但是时常会苦于重构会带来的成本，导致诞生很多巨石应用。 （部门特点引申）

所以我们建议大家习惯性的进行页面功能的拆分、拥有组件化开发的思维，在开发前做好设计，将代码更好的进行组织，增强代码的可塑性，降低维护成本。通常我们认为比较好的组件化思维可以体现在以下四个点：标准化（有统一的设计和使用规范）、复用性（重复在不同场景使用）、分治性（可以独立且完整的完成功能）、组合性（多个组件可以共同实现一个大的功能）。整体来看，其核心目的就是让代码可以更好的复用。

组件封装的思路

在拿到业务需求文档并了解了需要开发的功能模块以后，我们尽量不要太着急的上手去写代码，在开发之前最好是可以先着手去做好设计，梳理清楚开发思路，再细一点的话可以去考虑一下需求文档中可能没有描述到的细节、甚至可能存在的不足。

具体可以从以下几个点来出发去思考：

1. 需求目标是什么？
2. 你是怎么理解需求的？
3. 实现方案是什么？
4. 关键节点的数据结构设计是什么？
5. 模块的作用及在哪里有相似的？
6. 其他人是否可以理解你的设计思路？

个人认为开发前的思考、包括和协作的同事进行沟通的工作，可以和具体的代码开发的工作形成7：3的比例。

代码思路：

1. 组件的路径：
   1. 复用性较强的组件最好有一个的层级较高的单独的文件夹来整理；
   2. 功能模块内复用较多的组件最好在该功能层级较高的单独的文件夹来整理；
   3. 功能内部复用性较低，仅用来拆分代码的组件，可以整理在引用组件的文件同级目录。
2. 组件的参数提取：
   1. 多关注重复出现的任何变量。

组件的三个核心API

prop

父组件通过v-bind可以向子组件动态的传递变量，包含js中所有类型的变量。Vuejs Prop

通过Prop像组件传值，遵循单项数据流的原则。父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。

额外的，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。

这里有两种常见的试图在子组件中变更一个 prop 的情形：

1、这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用。在这种情况下，最好定义一个本地的 data property 并将这个 prop 用作其初始值：

props: ['initialCounter'],
data: function () {
  return {
    counter: this.initialCounter
  }
}

2、这个 prop 的值传入后需要进行转换。在这种情况下，最好使用这个 prop 的值来定义一个计算属性：

props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

以上操作的原因是在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变变更这个对象或数组本身将会影响到父组件的状态。

event

父组件通过v-on可以监听到子组件主动触发的事件，通常可以用来向父组件传递变量。Vuejs 自定义事件

需要注意事件命名，事件名不存在任何自动化的大小写转换，而是触发的事件名需要完全匹配监听这个事件所用的名称。

slot

子组件通过<slot></slot>为父组件提供的分发内容的出口。Vuejs 插槽

父组件
<child v-slot="slotProps">
    {{slotProps}}
</child>

子组件
<button>
    <slot :childInfo="childInfo">2</slot>
</button>    

值得注意一点的是父子组件的模板 都是在各自的作用域中进行编译。当父组件希望引用子组件内部的数据，可以使用作用域插槽。

组件之间的通信

由 Vue2的12种组件通信方式 转载

基于vue2.x

1. props
2. $emit / v-on
3. .sync
4. v-model
5. ref
6. $children / $parent
7. $attrs / $listeners
8. provide / inject
9. EventBus
10. Vuex
11. $root
12. slot

父子组件通信可以用：

• props
• $emit / v-on
• $attrs / $listeners
• .sync
• v-model
• ref
• $children / $parent

兄弟组件通信可以用：

• EventBus
• Vuex
• $parent

跨层级组件通信可以用：

• provide/inject
• EventBus
• Vuex
• $attrs / $listeners
• $root