vue 组件之间传值几种方式,vue组件间通信方式
本文主要介绍了vue中组件之间相互通信和传递值的几种方法。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。
目录
在VUE 1中的组件之间通信和传输值的方式。子组件和父组件之间的通信是通过调用父组件为组件2定制属性值来实现的。父组件主动获取子组件3的数据。提供/注入方法用于实现4。使用事件总线5。使用Vuex \本地存储\会话存储摘要。
vue中组件之间相互通讯传值的方式
当我们使用vue进行项目开发时，为了更好的管理项目，我们会将各个功能封装成一个组件，使用时直接引入并调用组件，实现代码复用。
我们封装组件的时候，经常会留一些预留接口，用于使用时调用和导入不同的数据。这时候我们就涉及到组件之前的相互价值转移问题了。
我这里总结了在vue中组件之前相互传值的方法：
1、子组件和父组件通讯，通过调用父组件给组件自定义属性值来实现
！- parent.vue -
模板
差异
H4我是父组件：/h4
p这是我自己的数据{{num}}/p
！-通过将自定义属性值传递给子组件，数据通过v-bind或缩写形式：sign传递，传输方法可以使用v-on或缩写@ sign来绑定事件-
child:p-num= num :p-num 2= num 2 @ changePNum= change num /
/div
/模板
脚本
从导入子级。/child.vue
导出默认值{
姓名：家长，
data(){
返回{
数字：10，
数量2: 20
}
},
方法：{
变更编号(n)
this . num=n；
}
}
}
/脚本
！- child.vue -
模板
差异
H4我是子组件：/h4
！-第一种可以使用props对象来接收父级传递的属性-
p这是父组件通过props/p传递的数据{{pnum}}
！-第二个是通过元素的实例属性$attrs获得的，props没有收到剩余的属性-
p这是为了获取父组件通过组件中的$attrs对象传递的数据{{ $attrs[p-num2]}}/p
！-第三种方式是通过当前实例中的$parent属性获取父实例对象-
p这是通过组件中的attrs对象从父组件获取数据{ { topnum } }
Button @click=changeNum 通过$emit /button更改父数据
Button @click=changeNum2 通过$listeners /button更改父数据
Button @click=changeNum3 通过$parent /button更改父项的数据
/div
/模板
脚本
导出默认值{
姓名：孩子，
//第一个可以使用props对象接收父级传递的属性。
道具：{
//在这里写下要接收的对应属性名，以驼峰的形式接收。
pNum: {
类型：数量
}
},
data(){
返回{
topNum: 0
}
},
已创建(){
//在实例中使用$parent获取父组件的实例，然后获取值
this.topNum=this。$ parent.num
},
方法：{
changeNum(){
//这里父级传递的方法被当前组件中的$emit方法调用，可以传入参数。
这个。$emit(changePNum ，40)；
},
changeNum2(){
//通过组件中$listeners中存储区的父级传递的方法进行调用
这个。$ listeners . changepnum(50)；
},
changeNum3(){
//通过组件中$listeners中存储区的父级传递的方法进行调用
这个。$ parent . change num(60)；
}
}
}
/脚本
上面的代码显示了两种不同形式的组件之间的通信模式。父组件具有相同的值传递模式，子组件具有不同的操作模式。
1.props/$emit组合法：通过定义props值，得到父组件传递给子组件的属性，得到子组件；子组件通过使用$emit方法调用父组件的方法；
2.2美元的组合。$attrs/$listeners:子组件可以通过$attrs属性中的值将属性值从父组件获取到子组件，该属性存储除props以外的属性值；
3.$ parent方法获取父组件中的数据和方法。
2、父组件主动获取子组件数据
！-父母-
模板
差异
Button @click=changeChildANum 通过$refs调用子组件方法来更改子组件数据/button
Button @ click= ChangeChildNum 通过$children调用子组件方法来更改子组件数据/button
p这是获得的childA的数据：{{childA_num}}/p
p这是获取的子组件childB的数据：{{childB_num}}/p
！-这里，组件示例通过使用ref-注册到当前组件的refs中
child-a ref=childA/
儿童-b /
/div
/模板
脚本
从导入childA。/childa . vue ；
从导入childB。/childa . vue ；
导出默认值{
组件：{
查尔达，
儿童b
},
data(){
返回{
儿童数量：0，
儿童数量：0
}
},
已创建(){}，
已安装(){
//$refs和$children都需要在mounted中才能获得它们。
//这里通过$refs获取注册的子组件实例，获取他的数据。
this.childA_num=this。$refs.childA.num
//第二种方式是通过当前组件示例中的$children获取子组件实例
this.childB_num=this。$儿童[1]。num
},
方法：{
changeChildANum(){
//在这里，通过使用$refs中的组件实例来调用组件中的方法
这个。$ refs . childa . change num()；
},
changeChildBNum(){
//在这里，通过使用$refs中的组件实例来调用组件中的方法
这个。$儿童[1]。change num()；
}
}
}
/脚本
！-孩子-
模板
分区/分区
/模板
脚本
导出默认值{
姓名：“childA”，
data(){
返回{
数字：10
}
},
方法：{
changeNum(){
this.num
}
}
}
/脚本
1.ref/$refs,通过为引入的组件定义一个ref属性，然后将属性值与$refs结合，我们可以得到当前组件的实例。
2.ref/$children属性，在为一个组件定义了ref值之后，所有用ref定义的组件数组都将在这个。$children，我们将通过下标获取一个子组件的属性值。
3、使用provide/inject方法实现
！- parent.vue -
模板
差异
孩子/
/div
/模板
脚本
从导入子级。/child . vue ；
导出默认值{
//通过为父级定义一个provide对象并将其定义为函数，然后返回parentData对象，对象指向当前组件的一个数据对象，相当于全部指向一个对象。
提供(){
返回{
parentData: this.proVideData
}
}
姓名：家长，
组件：{
儿童
},
data(){
返回{
提供数据：{
数字，1，
changeNum: null
}
}
},
已创建(){
//然后实例化后，传入子组件要调用的方法。
this . providedata . change num=this . change num；
},
方法：{
changeNum(){
this . provide data . num；
}
}
}
/脚本
！- child.vue -
模板
差异
p{{parentData.num}}/p
Button @click=parFun 调用父方法/按钮
/div
/模板
脚本
导出默认值{
//子组件通过inject接收祖先组件中提供的数据广播。
注入：[parentData]，
姓名：孩子，
data(){
返回{
}
},
方法：{
parFun(){
//这里直接执行存储的方法。
this . parent data . change nun()；
}
}
}
/脚本
这种方法适用于层次较深的组件的值传递。这里，基本原则是为祖先组件配置provide属性，然后存储您想要传递给后代组件的属性值。
然后，在后代组件中，对于需要传输的数据，可以为组件本身配置in rect属性，以接收想要监控的数据值；
然后就可以交流了。
4、使用事件总线
该方可以监视任何组件中当前定义的方法。实现组件之间的通信。
！- event-bus.js
从“Vue”导入Vue；
//在这里，一个新的vue实例对象是从
export const event bus=new Vue()；
！- parent.vue -
模板
差异
/div
/模板
脚本
//这里介绍事件总线。
从导入{ EventBus }。/event-bus ；
导出默认值{
data(){
返回{
eventBusMsg:“”
}
},
已创建(){
//然后将一个方法绑定到需要监控的事件总线上，类似于为发布订阅者添加订阅。
EventBus。$on(eventBusMsg ，(msg)={
console . log(msg)；
this.eventBusMsg=msg
});
},
销毁前(){
EventBus。$ small( eventBusMsg )；
}
}
/脚本
！-sub vue后代组件-
模板
差异
Button @click=eventBusChange 通过事件总线/button调用组件的方法
/div
/模板
脚本
//其他组件也需要你引入插件
从导入{ EventBus }。/event-bus ；
导出默认值{
data(){
},
已创建(){
},
方法：{
eventBusChange(){
//这里通过eventBus调用订阅的消息方法，传入值。
EventBus。$emit(eventBusMsg ， childB )；
}
}
}
/脚本
事件总线的调用方式是：
1.定义一个全局vue示例并将其导出；
2.然后在需要监控事件的组件中引入事件总线。
3.将方法添加到为当前组件创建的方法中。
4.然后，子组件可以通过引入event-bus文件，然后通过EventBus的方式执行时间监控方法。$emit。
5、vuex\localStorage\sessionStorage
也可以使用Vuex、本地存储等。以实现全球公共使用。
总结
本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。