Vue2组件通信之保姆版

        概念:

        Vue2是vue.js的重要版本之一，同时由于Vue的轻量级框架，声明式编程，MVVM设计模式，组件化开发和强大的的指令等优势受到广大公司使用，有大厂也有中小型企业也喜欢使用Vue来项目开发......

        好了废话少说，言归正传，今天总结了Vue 2组件通信的方式。再说组件通信方式之前，我们需要了解组件关系由哪几类？    父与子，子与父，祖孙关系(跨级)，非父子。

        首先，今天要采用总分法来分析Vue2的组件通信有哪些？，分为四大类，分别是：父组件向子组件通信，子组件向父组件通信，跨组件通信，非父子通信。

         父与子

        1.1、props属性传递

属性：设置属性、传递属性、接收属性、使用属性

设置属性的时候如果是单个单词，直接建议写小写。如果是多个单词，可以使用小驼峰，
也可以使用中划线的命名方式，但是建议使用的是中划线，并且所有单词是小写。

传递属性的时候如果不加v-bind，则一律是string字符串形式，否则除了string都应该加上v-bind。

接收属性

1.简单数组: 不能进行数据类型的约束的，不能确认是否必须填写，不能进行默认值的设置，
不能进行自定义有效性验证

2.简单对象，可以进行数据类型的约束，如果数据类型不对应，则会出现warn警告，
但是没有报错。

不能进行默认值的设置，不能进行自定义有效性验证

3.复杂对象，可以进行数据类型的约束，如果数据类型不对应，则会出现warn警告，
但是没有报错。还可以进行默认值的设置以及自定义校验的处理

复杂对象中的default对于基础数据类型可以直接设置默认值，如果对于Array、
Object则需要利用工厂函数进行默认值的设置。

validator是自定义规则校验，可以在控制台进行warn警告输出，但是如果违反规则，
事实上也不会出现error错误。

使用属性：建议使用小驼峰

        1.2、ref

 ref可以获取HTML元素的内容
 
ref可以获取到子组件的实例对象。既然能够获取到子组件的VueComponent，那么就能够获取到它的属性。而父组件去通过ref获取子组件的两个重要的操作主要包括：

1.操作数据

2.调用子组件的方法

父组件去操作子组件的数据与方法的时候，建议先进行内容的存在判断操作。if(存在) 执行

$children

通过this.$children可以获取到当前组件所下属的所有子组件，返回的是一个数组。但是这个数组中的实例顺序不是一定按组件的顺序进行排序的。

通过children拿到数组以后可以进行循环遍历，对所有的子组件进行VueComponent实例对象的获取，最终对其进行数据与方法的应用。

        1.3、v-model

在绝大多数情况下v-model=v-bind:value+v-on:input，而且v-model只能绑定三个元素，input、select、textarea

如果v-model想要绑定的目标是radio、checkbox，这时候会发现radio它不是value，也不是input，而应该是checked以及change的操作目标

可以利用model对checked和change进行映射，将其映射成value与input

但是像input类型为checkbox还有value的属性，这时候子组件中props属性接受里的value内容，它不再是v-model里的value，而仅仅是一个普通的属性值

那么v-check这个组件v-model就变成了v-bind:checked+v-on:change，需要注意的是子组件当中的$emit不再发射的是input而是映射以后的change事件

        1.4、slot

普通插槽：父组件中可以在组件调用的时候，在组件标签内进行相应内容的设置，并且可以是附带HTML标签形式的，还可以是动态的响应式数据，希望是在父组件中就可以自定义控制内容的界面效果。

子组件里只需要设置一个`<slot>`进行占位渲染即可。

具名插槽：在子组件中可以给`<slot>`添加name属性，而在父组件中可以给标签设置slot属性，该属性内容与子组件当中slot里的name是一一对应的。

默认插槽：父组件中除了带slot名称之外的所有内容都是属性默认插槽内容，在子组件中可以设置`<slot>`或者`<slot name="default">`进行接收与显示操作。

插槽默认值：在子组件中设置一定的具名插槽，并且设置初始显示的内容。如果父组件不进行插槽的传递，那么则直接显示子组件中插槽的内容，如果父组件进行了具名插槽内容的设置，子组件则显示的是父组件具名插槽的设置内容。

作用域插槽：

父组件中想要控制界面的显示

父组件传递数组给子组件，父组件中是不进行循环处理的

子组件中接收到的属性是数组，所以可以在子组件中进行循环数组操作

在进行数组循环内部可以利用`<slot>`将数组的对象进行子与父的回传

父组件将接收到子组件循环里的`<slot>`对象内容，那么就可以进行任意布局的控制

        子与父

        2.1、原生事件

1) 绑定在HTML标签上

在回调函数设置的时候可以不传递任何的参数，在函数中就可以获取到默认的事件对象，也就是event。 event的事件名称是不可以改变的。事件对象中的内容非常的多，主要包括：target、currentTarget、offsetX...

在回调函数设置的时候也可以进行参数的传递，并且可以传递event的实参对象，但是这个event的实参对象的参数名称是$event，名称还不能够随便变化。

在回调函数中可以进行参数的任意设置，包括设置自定义参数，但是在回调函数定义的时候需要将传参位置与接参位置进行一一对应处理。

2) 绑定在自定义组件上

将事件绑定在自定义组件上的时候不能够进行事件的触发操作

如果想让绑定在自定义组件上的事件进行原生事件的触发操作，则需要给绑定的事件添加修饰符.native。.native加上以后会将原生事件绑定到子组件的根元素上，那么子组件的非根元素之所以也能够触发是因为js事件冒泡的原理。

问题：target与currentTarget它们之间的差异与区别是什么？

target和currentTarget在绝大多数情况下是一样的，但是在事件委托的情况下，target是事件点击的对象，而currentTarget是事件绑定并触发的对象。

        2.2、自定义事件绑定

绑定的对象是自定义组件，目标是实现子组件与父组件的通讯操作。子组件中利用$emit进行事件的发射操作，那么在父组件中就可以利用@进行事件的绑定操作，绑定的事件名称是$emit发射过来的事件名称。

子组件进行$emit事件发射的时候，事件名称其实是可以任意的，包括和原生事件相同的名称，比如说click。在父组件中进行@事件绑定的时候，千万注意click并不是原生的事件绑定，只不过这个名称和原生的事件名称是一样的而已。

在父组件进行事件绑定的时候，并没有直接找到event的默认事件对象，其原因是子组件进行的是$emit事件发射，除了第一个参数事件名称，它还可以进行的是参数的传递，所以这时候$event不是重点，参数才是核心。

在父组件事件绑定的时候可以不进行实参传递操作，直接在回调函数中进行$emit参数的一一对应接参处理即可。

        2.3、parent

通过this.$parent可以找到当前组件的父组件实例对象VueComponent，而且父组件对象找到的只能是一个。可以操作父组件的数据与方法。建议操作数据与方法的时候进行内容是否存在的条件判断。

        2.4、root

this.$root返回的并不是一个VueComponent的组件实例，而是返回Vue实例对象。

this.$root下有一个$children的属性，而该属性是数组类型，但是root下的数组元素其实只有一个，就是根组的VueComponent      this.$root.$children[0]

        2.5、.sync

子组件不能够直接修改父组件传递过来的属性值，因为会造成父组件的二次重绘错误

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "money"

update:xxx是固定格式，`:money.sync=> v-bind:money+v-on:update:money`，通过.sync修饰符可以实现语法糖的代码缩写。

        非父子

        3.1、事件总线

解决的是非父子之间的通讯，利用的是入口文件中Vue原型中的属性，并且该属性的内容是一个Vue的实例对象，最终是利用隐式原型链的方式进行实例对象的属性查找与对应属性下的方法调用操作进行处理。$emit、$on、$off本质是Vue实例的方法，但是我们是在VueComponent组件实例中进行$emit、$on的处理，所以是先找到VueComponent、再去找Vue实例对象，所以是将$bus放在prototype当中。原型链的查找规则是自下向上进行查找。

在进行$on事件总线监听的时候，最早可以将其设置在beforeCreate生命周期钩子函数中，因为beforeCreate虽然是第一个生命周期钩子函数，但是它是有this对象的，也就是有VueComponent实例。按原则说beforeCreate是不能进行this.xxx = xxx设置数据操作的，因为这个生命周期钩子函数中还没有创建data、methods、computed、watch等内容。但是因为this.$bus.$on设置的是一个callback回调函数，这就意味着VueComponent组件实例其实已经是完整加载了。所以可以进行this.xxx = xxx的赋值操作。

按原则说应该在beforeDestory组件销毁前进行this.$bus.$off的事件监听取消处理，建议也是需要写的。但是在VueComponent组件实例销毁的时候，其实是进行了实例中所有内容的清除处理。因此，如果你不进行$off，也是没有太大问题的。

事件总线的代码会被分布在各个不同的组件当中，如果一个项目中仅仅是一两处的简单通讯，利用事件总线是没有问题的，而且非常的高效。但随着项目复杂度的强加，如果频繁出现非父子通讯，那么利用事件总线是不合适的，因为会随着代码增加产生网状结构，代码的可维护性会极大降低。

类似事件总线路的模式内容，除了bus，还有pubsub等三第三类库支持。

        祖与孙

        4.1、attrs和listeners

在父组件中进行子组件调用时会设置不定项属性内容，而子组件中可以利用$attrs统一全部获取到父组件中设置的所有属性内容。

如果子组件中对某些父组件传递过来的属性利用props进行接收，那么这些props的属性将会从$attrs中进行移除。

父组件除了设置属性还可以进行事件的绑定操作，那么子组件可以利用$listeners进行所有事件的获取，并且可以利用v-on进行所有事件的统一绑定操作。

        4.2、provide与inject

在拥有数据的祖级中可以利用provide进行数据的提供，事实上可以进行数据以及方法的提供

在任意层级的子孙组件中，如果想获取祖组件中的数据与方法可以利用inject进行注入操作，可以直接进行数据的显示应用

如果传递了一个方法给孙组件，那么该方法是可以调用的，但是如果该方法将修改祖组件中的数据，这时候祖组件中的数据将会发生响应式改变，但是该数据将不再回传给子孙组失眠。

         总结：以上就是我对vue2组件通信的理解，如有不同意见可以共同交流！！！