vue2.x组件通信有哪些方式,vuejs组件通信
它是component vue.js最强大的功能之一，组件实例的作用域是相互独立的，也就是说不同组件之间的数据是不能直接引用的，所以组件之间的通信非常重要。本文主要介绍Vue组件之间的通信方式，有需要的朋友可以参考一下。
:
目录
1.组件间通信的概念2。组件间通信解决了什么2。组件间通信的分类。组件间通信方案props传输数据$emit触发自定义事件refEventBusparent或parent或rootattrs和attrs和attrs和listenersprovide和injectvuex摘要摘要
一、组件间通信的概念
首先，我们将组件之间的通信这个词拆分开来。
交流大家都知道组件是vue最强大的功能之一，我们可以视每一个。作为组件的vue中的vue。传播是指发送者通过某种媒介将信息以某种格式传递给接收者，以达到某种目的。广义来说，任何信息的流量都是组件之间的通信，也就是组件(。vue)以某种方式传递信息以达到某种目的。比如我们在UI框架中使用表格组件的时候，可能会有一些数据传入表格组件，这个本质就形成了组件之间的通信。
二、组件间通信解决了什么
在古代，人们通过驿站、飞鸽、火警、符号、语言、眼神、触摸等方式传递信息。在科技飞速发展的今天，通信基本上是通过有线或无线电来完成的，有线电话、固定电话、无线电话、手机、互联网甚至可视电话等各种通信方式相继出现。从上面这段话可以看出，沟通的本质是信息同步，分享回vue。每个组件都有自己的作用域，组件之间的数据不能共享。但是，在实际开发中，我们往往需要在组件之间共享数据，这也是组件通信的目的，使它们能够相互通信，从而形成一个有机的完整的系统。
二、组件间通信的分类
组件之间的通信可以分类如下
父组件和子组件之间的通信兄弟组件之间的通信孙组件和子组件之间的通信不相关组件之间的通信图：
三、组件间通信的方案
梳理vue中的八种常规沟通方案
使用refEventBusparent或parent或parent或rootattrs和listenersProvide和InjectVuex通过$emit传递props来触发自定义事件。
props传递数据
适用场景：父组件向子组件传输数据，子组件设置props属性定义父组件传递的参数。父组件通过子组件标签中的文字量传输值Children.vue。
道具：{
//字符串形式
名称：收到字符串//类型参数
//对象形式
年龄：{
Type:Number，//接收的类型是数值型。
Defaule:18，//默认值为18
必须传递require:true //age属性
}
}
Father.vue组件
儿童姓名=杰克年龄=18岁/
$emit 触发自定义事件
适用场景：子组件向父组件传输数据。子组件通过$emit触发自定义事件，$emit的第二个参数是传递的数值。父组件绑定侦听器以获取子组件传递的参数Chilfen.vue。
这个。$emit(添加，好)
父亲. vue
children @ add= cartAdd($ event)/
ref
使用子组件时，父组件设置ref。父组件通过设置子组件的引用来获取数据。父组件
Children ref=foo /
这个。$refs.foo //获取子组件实例，通过它我们可以获取相应的数据。
EventBus
场景：同级组件传递值以创建中央EventBus。同级组件通过$emit触发自定义事件，$emit的第二个参数是传递的值。另一个同级组件通过$ on监听自定义事件Bus.js。
//创建中央时间总线类
类别总线{
构造函数(){
this . callbacks={ }；//存储事件的名称
}
$on(name，fn) {
this . callbacks[name]=this . callbacks[name] []；
this.callbacks[name]。推(fn)；
}
$emit(name，args) {
if (this.callbacks[name]) {
this.callbacks[name]。forEach((CB)=CB(args))；
}
}
}
//main.js
Vue.prototype.$bus=new Bus() //在Vue实例的原型上挂载$bus
//另一种方式
Vue。原型。$ Bus=newvue ()//Vue实现了总线的功能。
儿童1.vue
这个。$巴士。$emit(foo )
儿童2.vue
这个。$巴士。$on(foo ，this.handle)
parent或parent 或parent或root
通过公共祖先$parent或$root构建通信桥兄弟组件
这个。$parent.on(add ，this.add)
另一个兄弟组件
这个。$parent.emit(add )
attrs与attrs 与attrs与 listeners
适用场景：祖先向后代传递数据，设置属性$attrs和$listeners，批量传递。这些属性包括在父范围内不被识别(和获取)为适当的属性绑定(除了类和样式)。可以通过v-bind传递内部组件=$attrs //child: foo没有在props中声明。
p{{$attrs.foo}}/p
//父级
HelloWorld foo=foo/
//每隔一代将值传递给孙子，communication/index.vue
child 2 msg= lalala @ some-event= onSomeEvent /child 2
//要扩展的Child2
孙子v-bind= $ attrs v-on= $ listeners /孙子
//孙子使
div @click=$emit(some-event ，来自孙子的消息)
{{msg}}
/div
provide 与 inject
在祖先组件中定义provide属性，并通过注入接收器组件返回后代组件传递的值。祖先组件
提供(){
返回{
福：“福”
}
}
后代成分
Inject:[foo] //获取传递给祖先组件的值
vuex
适用场景：复杂关系的组件数据传输Vuex充当存储共享变量的容器。状态被用作存储共享变量的获取器。您可以添加一个getter派生的状态(相当于store中的计算属性)来获取共享变量的值。突变用于存储修改状态的方法。动作也用于存储修改后的状态，但是动作是基于突变的。常用来做一些异步操作。
小结
父子关系的组件数据传输可以选择Props和$emit，引用兄弟关系的组件数据传输可以选择bus，祖先和后代的组件数据传输可以选择$parent。attrs和listeners或者Provide和Inject关系复杂的组件可以通过vuex存储共享变量。
总结
这就是这篇关于Vue组件间通信的文章。有关Vue组件之间通信的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。