Vue2.0『数据传递』

总结:

1.子组件$emit抛出 父组件响应

   给子组件绑定自定义事件：
   <father @fn=fn :data=数据> </father>
   fn(data) {
       this.data = data
   }
   子组件内部触发自定义事件：
   poper：{
       value：number
   }
   this.emit('fn', 数据)

2.父组件v-model响应 子组件抛出input事件 接收value参数 可以通过model参数配置响应事件与接收参数

   1. <father v-model = value > </father>
   poper：{
       value：number
   }
   子组件内部触发自定义事件：this.emit('input', 数据)

3.父组件xx.sync="xx"也是双向绑定 子组件$emit('update:xx')抛出

   1. <father :updata:value = value => this.data = value :data=数据> </father>
   poper：{
       data：number
   }
   子组件内部触发自定义事件：this.emit('updata:value', 数据)
   2. <father :value.sync = 数据 :data=数据 > </father> 同步设置data
   poper：{
       data：number
   }
   子组件内部触发自定义事件：this.emit('updata:value', 数据)

4.可以通过扩展函数在原型上绑定广播/派发这个是在1.0中有的，但是2.0去除了，原理就是通过$children$childrenparent循环emit事件

   $parent：父组件内容
   $children[0]：第一个子组件内容
   this.$parent.$emit('自定义事件', 数据)
   this.$children.$emit('自定义事件', 数据)

5.重新创建一个实例实现eventBus事件总线 原理为在新的实例上通过$on$onemit传递与响应

    实例化组件：vue.prototypr.$enentBus = new Vue()
    实例化组件绑定事件：this.$eventBus.$on('绑定的事件', （）=> {})
    触发实例化组件事件：this.$eventBus.$emit('绑定的事件', 数据)
    注意：
        1.事件触发不能早于事件绑定
        2.可以用$nextTick解决
        this.$nextTick(() => {
            this.$eventBus.$emit('绑定的事件', 数据)
        })

6.传递参数时可以用v-bind/$attrs\text{传递传递函数可以用}v-on\mathrm{/}$attrs传递传递函数可以用v−on/listeners

    $attrs：组件的数据
    $listeners：组件的方法
    <father v-bind = $attrs v-on=$listeners> </father>

7.通过provide inject传递函数与参数

    父组件注入
    provide() {
     return {
         grandpa：this
     }
    }
    子组件消费
    inject:[
        'geandpa'
    ]

8.通过ref来获取组件实例，ref不能再template上使用，compute也不能用

     ref dom元素 dom对象
     ref 组件 组件实例

不建议用$parent\mathrm{/}$parent/children 以及组件派发/广播，dispatch1.0是有得，2.0就没有了，因为这样结构不清晰