VUE前端工程化-一掌握组件的多种通信及数据同步

组件通信

父子组件通信

父传子 props 属性
子传父 $emit 事件

这两种官方文档里有很详细的介绍就不解释了
还是举个栗子：

//parent.vue 父组件
<template>
    <div>
        parent: {{money}}
        <Son1 v-model="money"></Son1>
        <!-- <Son1 :value.sync = "money"></Son1> -->
        // 两种写法都可以，是语法躺；.sync 表示同步，如果只传 value 用 v -model 即可
        
    </div>
</template>

<script>
import Son1 from './Son1'
export default {
    components:{Son1},
    data(){
        return{money:100}
    }
}
</script>

// 子组件 SON
// 单项数据流，父给子绑定一个事件
<template>
    <div>
        son:{{value}}
        <button @click="change"> 点击 </button>
    </div>
    
</template>
<script>
export default {
    methods:{change(){this.$emit('input', this.value+100)
        }
    },
    props:{
        value:{
            type:Number,
            default:1
        }
    },
    data(){return{}
    }
}
</script>

• • *

多层级传递数据

$dispatch 和 $broadcast（Vue1 中可以用来实现基于组件树结构的事件流通信，vue2 中已经被移除）

（父要传到孙；孙要传到父；）

dispatch 是一个事件，首先会在自己实例本身上触发，然后沿父链向上传播。broadcast 是一个事件，它向下传播到当前实例的所有后代。由于后代扩展为多个子树，事件传播将会遵循许多不同的“路径”。除非回调返回 true，否则在沿该路径触发侦听器回调时，每个路径的传播将会停止。

//grandoon.vue 组件
<template>
    <div>
        grandson:{{value}}
        <button @click="changeParent"> 修改 parent</button>
    </div>
    
</template>
<script>
export default {
    methods:{changeParent(){// this.$parent.$emit('input',300)
            // this.$parent.$parent.$emit('input',300)
            this.$dispatch('input',300)
        }
    },
    props:{
        value:{type:Number}
    }
}
</script>

//dispatch 实现
/**
 * Recursively propagate an event up the parent chain.
 * 递归地在父链上传播事件。* @param {String} event
 * @param {...*} additional arguments
 */
// $dispatch 方法是定义在 Vue 的 prototype 上的
// 接受一个字符串类型的事件名称
Vue.prototype.$dispatch = function (event) {
 // 首先执行 $emit 触发事件，将返回值保存在 shouldPropagate 中
 var shouldPropagate = this.$emit.apply(this, arguments)
  
 // 如果首次执行的 $emit 方法返回的值不是 true 就直接返回
 // 如果返回值不是 true 就说明组件逻辑不希望事件继续往父组件进行传递
 if (!shouldPropagate) return
  
 // 如果首次执行 $emit 方法返回值是 true 就获取当前组件的 parent 组件实例
 var parent = this.$parent
  
 // 将函数接受的参数转换成数组
 var args = toArray(arguments)
  
 // use object event to indicate non-source emit on parents
 // 根据传入的事件名称的参数组装成 object
 args[0] = {name: event, source: this}
  
 // 循环知道组件的父组件
 while (parent) {
 // 在父组件中执行 $emit 触发事件
 shouldPropagate = parent.$emit.apply(parent, args)
  
 // 如果父组件 $emit 返回的是 true 就继续递归祖父组件，否则就停止循环
 parent = shouldPropagate ? parent.$parent : null
 }
  
 // 最后返回当前组件实例
 return this
}

broadcast 实现
Vue.prototype.$broadcast = function (event) {
 // 获取传入事件的类型，判断是否为字符串
 var isSource = typeof event === 'string'
  
 // 校正 event 的值，当接受 event 的类型为字符串时就直接使用，如果不是字符串就使用 event 上的 name 属性 
 event = isSource ? event : event.name
  
 // if no child has registered for this event,
 // then there's no need to broadcast.
 // 如果当前组件的子组件没有注册该事件，就直接返回，并不用 broadcast
 if (!this._eventsCount[event]) return
  
 // 获取当前组件的子组件
 var children = this.$children
  
 // 将函数接受的参数转换成数组
 var args = toArray(arguments)
  
 // 如果传入事件为字符串
 if (isSource) {
  // use object event to indicate non-source emit
  // on children
  // 根据传入的事件名称的参数组装成 object
  args[0] = {name: event, source: this}
 }

• • *

组件传值，尤其是祖孙组件有跨度的传值。

现在我们来讨论一种情况，A 组件与 C 组件怎么通信，我们有多少种解决方案？

1. 我们使用 VueX 来进行数据管理，但是如果项目中多个组件共享状态比较少，项目比较小，并且全局状态比较少, 那使用 VueX 来实现该功能，并没有发挥出 VueX 的威力。
2. 使用 B 来做中转站，当 A 组件需要把信息传给 C 组件时，B 接受 A 组件的信息，然后利用属性传给 C 组件，这是一种解决方案，但是如果嵌套的组件过多，会导致代码繁琐，代码维护比较困难; 如果 C 中状态的改变需要传递给 A, 使用事件系统一级级往上传递。
3. 自定义一个 Vue 中央数据总线，这个情况适合碰到组件跨级传递消息，但是使用 VueX 感觉又有点浪费的项目中，但是缺点是，碰到多人合作时，代码的维护性较低，代码可读性低

$attrs $listeners

在 vue2.4 中，为了解决该需求，引入了 $attrs 和 $listeners，新增了 inheritAttrs 选项。

$attrs  (属性集合)
$listeners (方法集合)
v-bind="$attrs", v-on="$listeners"

$attrs 包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)

provide inject

1.provide 就相当于加强版父组件 prop
2.inject 就相当于加强版子组件的 props 

因为以上两者可以在父组件与子组件、孙子组件、曾孙子 … 组件数据交互，也就是说不仅限于 prop 的父子组件数据交互，只要在上一层级的声明的 provide，那么下一层级无论多深都能够通过 inject 来访问到 provide 的数据

// 父组件
<template>
    <div class="test">
        <son prop="data"></son>
    </div>
</template>
 
<script>
export default {
    name: 'Test',
    provide: {name: 'Garrett'}

// 孙组件（父组件 -- 子组件 -- 根组件）<template>
    <div>
        {{name}}
    </div>
</template>
 
<script>
export default {
    name: 'Grandson',
    inject: [name]
}
</script>

缺点 ：
这么做也是有明显的缺点的，在任意层级都能访问导致数据追踪比较困难，不知道是哪一个层级声明了这个或者不知道哪一层级或若干个层级使用了，因此这个属性通常并不建议使用能用 vuex 的使用 vuex，不能用的多传参几层，但是在做组件库开发时，不对 vuex 进行依赖，且不知道用户使用环境的情况下可以很好的使用

event bus

实现途径是在要相互通信的兄弟组件之中，都引入一个新的 vue 实例，然后通过分别调用这个实例的事件触发和监听来实现通信和参数传递。

有了 eventbus 后

发送组件中
`
EventBus.$emit(“hello”, this.number);`

接受组件中
`
EventBus.$on(“hello”, (number) = > {

console.log(number)

});`

使用 case

注意

1. $bus.on 应该在 created 钩子内使用，如果在 mounted 使用，有可能接收不到其他组件来自 created 钩子内发出的事件。

   1. 使用了 $bus.on，在 beforeDestroy 钩子里应该再使用 $bus.off 解除，因为组件销毁后，没有必要把监听句柄存储在 vue-bus 里了。