vue中组件传值的几种方式
一、父组件给子组件传值方式（步骤）
1.VC1(子组件)定义props[a,b,c] 注意：props中的每个值都可以加各种修饰，如数据类型，是否可为空，默认值...
2.VC2(父组件)引用子组件
<VC1 a="1",b="2",c="3"></VC1>
二、子组件给父组件传值方式
1.回调方法（:xxx="methodA"）
a.父组件（数据接收方）定义此方法methodA
b.子组件（数据发送方）定义props:xxx【xxx属性为方法】 ***传过来得属性必须在props中定义，即只有在props中定义的属性才能被父组件传值
c.子组件（数据发送方）调用xxx方法
2.回调事件 <VC @xxx="methodB"></VC> this.@refs.VC.$on('xxx',methodB)
a.父组件（数据接收方）定义方法methodB
b.通过this.@refs.VC.$on('xxx',methodB) 绑定methodB
c.子组件（数据发送方）通过某事件去触发xxx事件 ----》this.$emit('atguigu',this.name,666,888,900)
d.父组件解绑该事件
3.回调事件<VC ref="curVC" @xxx="methodC"></VC>
a.父组件（数据接收方）定义方法methodC
b.子组件（数据发送方）通过某事件去触发xxx事件 ----》this.$emit('atguigu',this.name,666,888,900)
c.父组件解绑该事件
三、事件总线(步骤)
1.在vue对象中注册自己为$bus Vue.prototype.$bus=this
2.在VC(数据接收方)中定义方法methodA
3.this.$bus.$on('xxx',methodA) xxx：表示事件
4.VC2（数据发送方）去触发xxx事件，this.$bus.$emit('xxx',a,b,c)
5.解绑该事件
四、消息订阅与发布
1.VC1(订阅者)导入pubsub组件，在mount函数中订阅消息
this.pubId = pubsub.subscribe('xxx',(msgName,data)=>{
console.log('有人发布了hello消息，hello消息的回调执行了',msgName,data)
})
2.VC2(发布者)导入pubsub组件，通过某事件去发布
pubsub.publish('xxx',666)
3.VC1(订阅者)在beforeDestory中取消订阅该消息
pubsub.ubsubscribe(this.pubId)
最新文章
- 关于ArcGIS API for JavaScript中basemap的总结介绍（一）
- js中各种事件的兼容性
- Data storage on the batch layer
- BCB6 重装后的项目编译莫名问题
- 3-5 RPM包校验
- mybatis--MapperScannerConfigurer
- 在spring拦截器中response输出html标签到页面
- poj2155一个二维树状数组
- ASP.NET MVC中URL末尾斜杠的实现
- 使用Docker镜像和仓库
- 网络共享存储服务NFS
- 【Deep Hash】NINH
- 如何把光盘制作成ISO镜像文件
- IIS 8.0 Using ASP.NET 3.5 and ASP.NET 4.5微软官方安装指导
- 如何去除WIN7任务栏项目上右键菜单中的最近访问一栏
- ant design Modal遮罩层颜色加深 解决方案
- x86 体系指令
- 170710、springboot编程之启动器Starter详解
- Array.new(5, [1, 2, 3]) or Array.new(5) { [1, 2, 3] }的差别
- eclipse如何设置时常挂提示