vue组件间传值---下到上 篇

$emit：向父级传值

单纯从emit角度而言没啥好说的

组件内部$emit('someEvent')
使用组件时:,注意这里不传参,someEvent需保持一致
son组件

father组件
在使用son组件的地方注册一个和son组件中emit第一个参数一样名字的函数，简单来说，就是son组件emit时的第一个参数要和使用son组件时@后面写的保持一致。（@可以理解为给某一个类型的事件绑定一个处理函数@事件类型=处理该事件的函数，像@click是vue帮我们定义好的，而@changeFatherToSon1是我们自己定义的）

$emit相关变种

1、$emit('update:value',someValue)

son组件

father组件

这里value=>{this.fatherToSon2=value}也可以单独抽出一个函数。
父组件还有一种语法糖的写法

@update:value1="value=>{this.fatherToSon2=value}"改为:value2.sync="fatherToSon2"即可

2、$emit('input')

注意，input事件是vue帮我们定义好的，我们通过emit来触发，以达到通信的目的,其实和正常的$emit发射自定义事件是差不多的
son组件

Father组件

这里其实也有个语法糖叫v-model，v-model其实可以理解为:value="somevalue" @input="value=>this.somevalue=value"的简写形式,当我们把这个v-model挂到组件上时，就可以形成一种新的组件通信方法。
其中子组件不需要改动，父组件修改

emit相关的到这里就结束了

$root和$parent

这里和$children和$refs类似，$parent取当前组件实例的父组件实例，而$root取到根节点的组件，往往是app组件

$parent:向上派发事件

此处需要结合$emit一起食用
emit往往用于子组件通知父组件更新某个父组件的值，但是当组件层级达到三层即（son-father-grandpa）时，需要在son中使用$parent.$emit进行事件发射如果层级更深显然不可能无限$parent，于是我们需要让子组件调用$eventDispatch，让这个子组件向上的每一级父组件都进行$emit，一旦调用emit的组件的父组件监听了对应的事件，那么就会执行。

  Vue.prototype.$eventDispatch = function (event, value) {
    let parent = this.$parent
    while (parent) {
      parent.$emit(event, value)
      parent = parent.$parent
    }
  }

举例：我们在ancestors上监听了emitToUpper事件

同样的，在app组件也可以进行监听emitToUpper事件

只要监听了@emitToUpper事件的组件都会触发对应的函数