Vue2 组件之间的通讯关系

Vue2 组件之间的通讯关系

父与子

props

• 属性：设置属性、传递属性、接收属性、使用属性
• 设置属性的时候建议使用的是小写，可以使用中划线的命名方式、小驼峰的命名方式
• 传递属性不是关键，只需要设置对应的属性值就可以了
• 接收属性是重点：不管是中划线还是小驼峰建议多个单词的时候都使用小驼峰的方式进行命名。如果设置属性的时候使用中划线，接收属性的时候可以一一对应，但使用属性的时候仍旧需要利用小驼峰方式进行应用。
  • 简单数组类型：仅仅能够实现的是属性的接收，无法判断数据的类型，默认值的设置，有效性的校验
  • 简单对象类型：可以实现属性的接收，可以实现数据类型的判断，无法实现默认值与有效性校验操作
  • 复杂对象类型：可以实现属性的接收，可以实现数据类型的判断，也可以实现默认值与有效性校验。利用type进行数据类型的约束，可以是单个类型，也可以利用数组进行多类型约束。required可以确认是否必须填写该属性。default默认值对于基础数据类型可以直接设置，对于引用数据类型需要利用工厂函数进行返回。validator是实现自定义有效性校验的操作，如果通过校验，直接不提示，否则提示校验失败。
• 使用属性：如果是中划线或者小驼峰，也就是多个单词组成的属性时候，在插值表达式内一律使用小驼峰进行属性的渲染
• 在进行属性传递的时候，一定要考虑其数据类型，基础数据类型、引用数据类型在进行属性传递的时候都是可以的，除了string数据类型，如果想要传递number、boolean、array、object、function…其它的数据类型，不能够直接进行属性传递，需要利用v-bind进行属性绑定操作，如此才能够确保数据类型的对象，否则都将以字符串形式进行传递。

ref

• 利用ref可以找到子组件，并且修改子组件中的响应式数据内容
• 利用ref可以找到子组件，并且直接调用子组件中的方法

children

• 利用$children返回的是数组，数组中包含的是当前组件所有子组件的VueComponent实例对象，但是它们是无序的，并不是按一定的顺序进行返回。
• 既然是数组，那么就可以进行循环遍历，在操作每个数组中的VueComponent实例对象，如果想要修改或者调用函数，建议最好的办法是先进行条件判断，因为并不是每个组件当中都一定包含数据和方法的内容。

v-model

• 绝大多数情况v-model=v-bind:value+v-on:input
• 事实上v-model只能绑定的元素其实只有3个，input,textarea,select
• input的类型为text的时候通常是input事件,input的类型为radio、checkbox的时候通常是change事件
• 可以利用model将prop与event进行映射修改，将默认的value与input改写成目标的属性与事件，比如说checked和change

.sync

• 父组件进行属性传递，子组件进行的是props属性的接收，但是子组件中妄想直接修改父组件中的属性数据，这时候就会产生二次重绘的错误内容
• 子组件想要修改父组件中的数据内容，可以利用之前已经强调的子与父之间的通讯方式$emit，子组件中需要利用$emit进行事件的发射操作以及附带参数的传递，父组件中进行的是事件的监听，利用的是v-on，可以使用赋值语句进行$event事件参数数据的接收与处理操作。
• 在子组件中，应该可以设置事件名称为任意字符，并且可以携带:这样的特殊符号，所以说像xxx:eventName其实是合法的，但是vue2当中规定了一个特殊的事件名前缀叫update:eventName，利用这个事件名称进行子与父的通讯，那么父组件中就可以将v-bind与v-on的内容利用.sync修饰符进行简化书写，这其实是一个语法糖。
• 如果想要进行多值的传递，正常情况下应该使用多个v-bind和多个v-on，而利用.sync修饰符的话，那么应该是多个v-bind:xxx和多个v-on:update:xxx的形式，最终可以利用v-bind.sync进行多个值的绑定的语法糖简化操作。

slot

• 普通插槽
  • 在父组件中，可以在组件调用的时候，在组件标签内设置相应的内容，并且可以是附带标签形式的，也可以是动态渲染的响应式数据，希望是在父组件中就可以自定义控制传递内容的界面效果。
  • 子组件只需要利用<slot>进行占位渲染就可以了
• 具名插槽
  • 在子组件中可以给slot组件添加name属性，而在父组件中可以给标签设置slot属性，该属性内容与子组件中的slot组件的name属性是一一对应的。
• 默认插槽
  • 父组件中除了带slot名称之外的内容都属于默认插槽的内容，在子组件中可以设置<slot>或者<slot name="default">进行接收与显示操作。
• 插槽默认值
  • 在子组件中设置一定的具名插槽，并且设置初始显示的内容，如果父组件不进行插槽的传递，那么则会显示子组件中的默认值，如果父组件中进行传递，则以父组件传递的内容为先。
• 作用域插槽
  • 在父组件中想要进行整体界面的自由控制
  • 父组件不进行遍历循环，它将传递数组给子组件
  • 子组件中进行v-for循环遍历，得到的是对象
  • 利用<slot>进行对像内容从子到父的回传
  • 父组件中接收到的是对象内容，可以利用对象进行任意布局的控制

子与父

原生事件：

1)绑定HTML标签上

• 绑定原生DOM事件在HTML标签上，设置回调函数的时候可以不设置形参，就可以直接获取到event事件对象，也只能获取到event的事件对象，event的名称是不可以改变的
• 事件对象当中的内容非常的多，主要的属性包括：target、offsetX、pageX、clientX等内容
• 绑定原生DOM事件在HTML标签上，设置回调函数的时候如果传递$event事件对象，那么在回调函数处如果不设置形参，那么在函数体中的event仍旧是原来默认的event事件对象。如果设置了形参，可以是event、e或者任何的形参名称，那么在函数体中，对应的形参应用名称则是传递过来的$event事件对象内容。
• 事件对象的实参一定是$event，而不是其它的名称。
• 如果说在进行回调函数绑定的时候需要传递自定义参数以及event事件对象，那么可以进行任意位置的设置，$event实参可以放置于前面也可以放置于后面任意位置，但是在回调函数定义的时候，需要设置形参与之一一对应。

2)绑定自定义组件上

• 可以给自定义组件进行事件的绑定操作，比如click事件，但是在绑定以后事件并不会直接触发回调，因为无法正常的实现事件的绑定处理，需要添加修饰符.native才可以进行正常的触发。
• 在利用.native进行事件绑定自定义组件的时候，事实上自定义组件中的触发是基于事件冒泡原理，所有的子元素都最终冒泡到父元素，所以该事件其实是被绑定到子组件的根级元素上。

vue的自定义事件：

1)绑定自定义组件上

• 子组件中可以利用$emit从下向上进行事件的发射操作，可以传递事件名称以及事件的参数，而参数内容可以传递也可以不传递，如果传递，可以传递任意数据类型。
• 子组件中进行$emit事件发射时的事件名称是可以任意的，但也可以是和vue原生事件名称相同，并不会产生冲突，只不过如果名称是相同的情况下，所代表的意义是不同的，在这里代表的是自定义事件的名称，$emit(‘自定义事件名称’,‘自定义事件参数’)
• 在自定义事件中，如果不进行实参传递，直接进行形参设置，可以获取到自定义事件传递过来的事件参数数据，也可以利用event直接获取到用户的原生事件对象。
• 如果想进行回调函数的实参设置，那么可以利用任意参数以及$event进行自定义事件参数的接收，而回调函数中则需要进行一一对应，强调一点$event不再是事件对象，而是变成了自定义事件的参数。
• 如果在进行父组件事件绑定的时候仍旧添加.native修饰符，即便子组件中有$emit自定义事件操作，但是父组件中的事件仍旧会以“vue的原生事件”为优先，而“vue自定义事件”则被原生事件所侵占。原生事件的优先级高于自定义事件。

parent

• 通过this.$parent可以找到当前组件的父组件，而且父组件只有一个，可以操作父组件中的数据与方法。

root

• this.$root返回的是一个Vue实例对象，并不是VueComponent组件实例对象
• this.$root下有一个$children的属性，而属性是数组类型，但只有一个元素，而这个元素则是根组件，是VueComponent实例对象。

非父子

事件总线

• 解决的是非父子之间的通讯，利用的是入口文件中Vue原型中的属性，并且该属性的内容是一个Vue实例对象，最终是利用隐式原型链的方式进行实例对象属性的查找与对应属性下方法的调用操作。因为Vue实例中包含$emit、$on、$off等方法
• 在组件当中的this指向的是VueComponent组件实例对象，但是利用prototype最终this.$bus找到的是Vue实例对象，那么就可以利用Vue实例方法$emit从下向上进行事件的发射操作以及数据的传递处理。
• 可以在接收组件中利用$on在beforeCreate生命周期钩子函数中进行监听，然后对发射过来的data数据进行二次处理，建议在组件销毁前利用$off进行事件的取消监听操作。
• 在实际项目过程中很少使用bus以及订阅与发布模式的通讯方式，因为它们的代码流向非常复杂，代码的维护性不高，当业务变得越来越复杂的时候，利用这种方式进行通讯，将会产生网状结构的数据传递。

订阅发布模式

pubsub

vuex

• 设置状态state，mapState，computed
• 获取内容getters，mapGetters，computed
• 修改数据mutations，mapMutations，methods，commit提交，可以异步，但不建议
• 异步操作actions，mapActions，methods，dispatch分发，支持同步异步
• 模块拆分modules，namespaced
• 插件辅助pluglins

祖与孙

attrs和listeners

• 在父组件中进行子组件调用时会设置不定项的属性内容，而子组件中可以利用**$attrs**统一全部获取到父组件中设置的所有属性内容。
• 如果子组件中对某个父组件设置的属性进行了props属性的接收，那么$attrs将会把这些props接收的属性内容进行排除操作。
• 父组件除了设置属性还可以给子组件传递事件，那么这时候子组件可以利用**$listeners进行所有事件的获取，再利用v-on**将所有的事件进行统一的监听绑定。

provide和inject

• 在拥有数据的祖级组件中可以利用provide进行数据的提供操作
• 在任意层级的子孙组件中可以利用inject进行数据的注入操作，可以进行显示
• 如果想要传递一个方法给子孙，那么该方法可以修改祖级的数据，但是不会再进行属性的回传操作
• 因为在子孙组件中是不可以直接修改祖级组件的属性数据的，因为那样同样会产生组件的二次重绘问题