组件通信精髓

转载自文章：vue.js 组件通信精髓归纳

参考：

• vue组件之间8种组件通信方式总结（https://blog.csdn.net/zhoulu001/article/details/79548350）

• https://github.com/iview/iview/blob/2.0/src/mixins/emitter.js

• https://github.com/iview/iview/blob/2.0/src/utils/assist.js

组件的分类

常规页面组件

由 vue-router 产生的每个页面，它本质上也是一个组件（ .vue），主要承载当前页面的 HTML 结构，会包含数据获取、数据整理、数据可视化等常规业务。

功能性抽象组件

不包含业务，独立、具体功能的基础组件，比如日期选择器、弹窗警告等。这类组件作为项目的基础控件，会被大量使用，因此组件的 API 进行过高强度的抽象，可以通过不同配置实现不同的功能。

业务组件

它不像第二类独立组件只包含某个功能，而是在业务中被多个页面复用的，它与独立组件的区别是，业务组件只在当前项目中会用到，不具有通用性，而且会包含一些业务，比如数据请求；而独立组件不含业务，在任何项目中都可以使用，功能单一，比如一个具有数据校验功能的输入框。

通用业务组件

项目之间通用的业务模块

组件的关系

父子组件：父子关系即是组件 A 在它的模板中使用了组件 B，那么组件 A 就是父组件，组件 B 就是子组件。

兄弟组件：两个组件互不引用，则为兄弟组件。

跨级组件：就是在父子关系中，中间跨了很多个层级。

组件的构成

一个再复杂的组件，都是由三部分组成的： prop、 event、 slot，它们构成了 Vue.js 组件的 API。

属性 prop

prop 定义了这个组件有哪些可配置的属性，组件的核心功能也都是它来确定的。写通用组件时， props 最好用对象的写法，这样可以针对每个属性设置类型、默认值或自定义校验属性的值，这点在组件开发中很重要，然而很多人却忽视，直接使用 props 的数组用法，这样的组件往往是不严谨的。

插槽 slot

插槽 slot，它可以分发组件的内容。和 HTML 元素一样，我们经常需要向一个组件传递内容

自定义事件 event

两种写法：

1、在组件内部自定义事件 event，通过 $emit，就可以触发自定义的事件 on-click ，在父级通过 @on-click 来监听

2、用事件修饰符 .native 直接在父级声明

组件的通信

1、ref和$parent和$children

Vue.js 内置的通信手段一般有两种：

• ref：给元素或者组件设置这个属性，代表引用元素或组件实例；

• $parent / $children：访问父 / 子实例，这两种方法的弊端是，无法在跨级或兄弟间通信。

2、Event Bus：事件总线

3、vuex处理组件之间的数据交互

跨级通信

1、$attrs和$listeners

2、provide / inject