这次给大家带来vue数据传递方法总结，vue数据传递的注意事项有哪些，下面就是实战案例，一起来看一下。
前言
最近碰到了比较多的关于vue的eventBus的问题，之前定技术选型的时候也被问到了，vuex和eventBus的使用范围。所以简单的写一下。同时有一种特殊的实现方案。
有这么几种数据传递方式，vuex、props、eventBus和特殊的eventBus。
vuex
不介绍，数据量和复杂度达不到不用它你才会向下看。
props
demo
父子组件传值，官方api，只写个demo。
1.父组件
// datainfo: 'sendToSon'// methodsupdateHandler (newVal) { this.info = newVal}
登录后复制
2.子组件
// propsprops: ['info']// 向上传值，某个方法中使用this.$emit('update', 'got')
登录后复制
父向子传值–>props 子向父传值–>子组件绑定事件回调定义在父组件，子组件触发此事件。 因不推荐子组件内直接修改父组件传入的props，需使用自定义事件。
限制
父子组件。
eventBus
demo
bus皆为导入的bus实例
// busconst bus = new Vue()// 数据接收组件// 当前组件接收值则bus.$on('event1', (val)=>{})// 数据发出组件// 当前组件发出值则bus.$emit('event1', val)
登录后复制
可以看出本质是一个vue实例充当事件绑定的媒介。 在所有实例中使用其进行数据的通信。
双(多)方使用同名事件进行沟通。
问题
$emit时，必须已经 $on，否则将无法监听到事件，也就是说对组件是有一定的同时存在的要求的。(注：路由切换时，新路由组件先 created，旧路由组件再destoryed，部分情况可以分别写入这两个生命周期，见此问题)。
$on在组件销毁后不会自动解除绑定，若同一组件多次生成则会多次绑定事件，则会一次 $emit，多次响应，需额外处理。
数据非“长效”数据，无法保存，只在 $emit后生效。
所以是否有一种更适用的方案呢？
特殊的eventBus？
demo
我们先来看个代码，线上代码。 bus皆为导入的bus实例。
// busconst bus = new Vue({ data () { return { // 定义数据 val1: '' } }, created () { // 绑定监听 this.$on('updateData1', (val)=>{ this.val1 = val }) }})// 数据发出组件import bus from 'xx/bus'// 触发在bus中已经绑定好的事件bus.$emit('update1', '123')// 数据接收组件{{val1}}// 使用computed接收数据computed () { val1 () { // 依赖并返回bus中的val1 return bus.val1 }}
登录后复制
不同
正统的eventBus只是用来绑定和触发事件，并不关心数据，不与数据发生交集。而这个方案多一步将数据直接添加在bus实例上。且事件监听与数据添加需提前定义好。
数据接收方不再使用$on来得知数据变化，而是通过计算属性的特征被动接收。
解决的问题
通信组件需同时存在？数据在bus上存储，所以没有要求。
多次绑定？绑定监听都在bus上，不会重复绑定。
数据只在$emit后可用？使用计算属性直接读取存在bus上的值，不需要再次触发事件。
探讨
为什么使用计算属性
其实应该是为什么不能直接添加到data上，如 data1: bus.data1？我们可以再看一段代码，线上代码。 将bus修改为
data () { return { // 多一层结构 val: { result: 0 } }},created () { this.$on('update1', val => { console.log('触发1', i1++) this.val.result = val })}
登录后复制
数据接收组件改为
// templatedata中获取直接修改值：{{dataResult}}data中获取直接修改值的父层：{{dataVal}}computed中依赖直接修改值：{{computedResult}}// jsdata () { return { // 获取直接修改值 dataResult: bus.val.result, // 获取直接修改值的父层 dataVal: bus.val } }, computed: { computedResult () { // 依赖直接修改值 return bus.val.result } }
登录后复制
可以看到，data中获取直接修改值值的数据是无法动态响应的。
为什么要用事件
其实不用 $emit触发，使用 bus.val = 1直接赋值也是可以的，那么为什么不这么做呢？
简化版的vuex
其实这种eventBus就是简化版的vuex。 vue文档中有这样一段话：
组件不允许直接修改属于 store 实例的 state，而应执行 action 来分发 (dispatch) 事件通知 store 去改变，我们最终达成了 Flux 架构。这样约定的好处是，我们能够记录所有 store 中发生的 state 改变。
store对应 bus实例， state对应 data， action对应 事件， dispatch对应 $emit。 同时vuex中组件获取数据的方式正是通过计算属性，那么其实vuex和Flux架构的理解和使用也没有那么难不是吗。
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
用JS检测电脑配置（附代码）
怎样自定义设置vue项目打开关闭eslint校验
以上就是vue数据传递方法总结的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2764545.html
