在Vue中实现组件通信的方法有哪些
这篇文章给大家介绍在Vue中实现组件通信的方法有哪些，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。
成都创新互联公司是专业的舞钢网站建设公司，舞钢接单;提供网站制作、网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行舞钢网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
为什么要使用Vue
Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以创建可维护性和可测试性更强的代码库，Vue允许可以将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JavaScript，以用来渲染网页中相应的地方，所以越来越多的前端开发者使用vue。
常用的通信手段有两种：
1.ref：给元素或组件注册引用信息
2.children:访问父级组件和子组件的实例。
这两种方式都是直接通过实例的方式获取的方式。示例如下：
//comA组件A
export default {
data () {
return {
title: '测试通信'
}
},
methods: {
sayHello () {
window.alert('你好');
}
}
}这里引用组件A
上面的例子我们可以看出我们使用ref来获取组件的实例上的方法和数据
显示两个组件的信息
{{ msg }}
{{ msg }}
$children 返回所有子组件的实例，是一个数组
父组件中的msg: {{ msg }}
{{ msg }}
显示父组件msg
{{ msg }}
这两种方式是基于组件的上下文环境访问到父组件或者全部子组件（数组）。这种方式有很大的弊端是，无法跨级或兄弟间进行通信，比如如下的结构
// parent.vue
我们假如想在组件A中获取其他组件那么我们可能需要使用vuex或者和Bus事件总线的方式进行解决。
事件总线
定义事件总线的方式有以下两种
// bus.js 事件总线
import Vue from 'vue'
export const $bus = new Vue()
// main.js我们再main入口中定义这个事件总线
Vue.prototype.$bus = new Vue()
发送事件
对下面comA说明，会接收来自父组件的参数number，并显示出来；有个按钮，点击会调用函数handleAddRandom，生成一个随机数，并调用事件总线的$emit方法，将随机数给事件总线，由事件总线进行数据传递。
{{number}}
随机增加
接收事件
随机增加:
上面是我们通过事件总线的方式进行通信
然后我们来说下另一种可以媲美Vuex的一种方式provide / inject
provide / inject
说起这两个API可能大家不太明白我们来举例子说明
// A组件
export default {
provide: {
name: 'Aresn'
}
}
// B组件
export default {
inject: ['name'],
mounted () {
console.log(this.name); // Aresn
}
}代码中我们可以看到我们再组件A中设置了一个provide:{name："Aresn"}，这个方法的作用就是将该变量提供给所有的子组件。我们在B组件中我们使用indect获取了这个变量，这样我们就可以使用this.name获取到这个那么变量。下面我们可以使用一些骚操作大胆的替代Vuex。（这里说明一下官网中不建议我们是使用这两个API在常规应用程序中，建议使用在高阶组件中，建议归建议用的好就可以啦）
使用provide / inject期待Vuex
Vue cli中搭建出来的项目结构中都会有一个app.vue作为入口组件，我们可以使用这个API在上面大做文章。
这里我们把根组件实例作为一个参数传递给app变量，下面我们就可以通过app[变量||方法]达到vuex的目的
{{ app.userInfo }}
但是这样做有一个弊端那就是可能会让根组件app.vue的代码变得特别的臃肿，当然也有解决办法，我们可以使用mixins混合的方式将不同的逻辑分开写到不同的js里面然后通过 mixins: [mixins_user]的方式在app.vue中引用这个mixin。
关于在Vue中实现组件通信的方法有哪些就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
当前名称：在Vue中实现组件通信的方法有哪些
文章链接：http://kswjz.com/article/gsgsod.html
