vue项目组件之间的通信方式

本文主要是介绍vue项目组件之间的通信方式，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

** 1.1 父子组件**
a. 父向子传数据： 第1种： 父通过属性传值，子组件通过props接收数据(注：props传过来的数据是单向的，不可以进行修改)
第2种：子组件可以通过$parent来获取父组件里的数据和调用父组件的方法（注：数据是双向的，还要注意如用了UI组件并且在该UI组件里重新定义一个新的组件,那么在子组件里需要$parent.$parent来获取数据和调用方法）
b. 子向父传数据： 第1种： 子组件通过$emit触发父组件的自定义事件，并进行传值，父组件通过自定义事件进行接收数据。
第2种：可以给子组件注册一个引用信息ref，然后父组件就可以通过$refs来获取子组件里面的数据和调用子组件里的方法。

** 1.2 祖孙级嵌套深的组件**
第一种： 通过在父组件provide提供一个变量，然后在孙组件inject引入这个变量（注：祖向孙传数据，但不是响应式的，所以要传入一个可以监听的对象，如Array和Object）
代码如下：
// 祖组件
provide () {
return {
msg: this.data
}
}
// 孙组件
inject: ['msg']
// 然后在计算属性里取值
computed: {
newValue () {
return this.msg
}
}

** 1.3 页面之间（没有关系的组件）**
第一种：简单传一个字段，我们可以通过路由中的query进行传值，然后通过$route.query来获取数据（不实用）
第二种： 事件总线
1.在项目中main.js文件引入全局的Vue.prototype.$EventBus = new Vue()
2.通过$EventBus.$emit来传数据，通过$EventBus.$on来接收数据
注意： 1为什么第一次传数据$on没有被触发
** 答：我们在A页面通过$emit传数据的时候，B页面还没有被生成，所以$on事件没有被触发。B页面在created和mounted后，才会执行A页面的beforeDestory，所以要把$emit事件放在A页面beforeDestory ** 的生命周期里，那么这时B页面已经生成，所以第一次$on事件会被触发。**
** 2 接下来的每一次传数据，之前的$on事件没有被撤销，还一直存在**
** 答：我们在B页面的created和mounted里来接收数据，但是要记住在B页面销毁的时候，要通过$EventBus.$off（）来进行手动删除。**

第三种： Vuex

本人自己的一些简单理解，仅供参考。如有问题欢迎评论，一起学习。。。

这篇关于vue项目组件之间的通信方式的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！