vue数据传递--我有特殊的实现技巧


Posted in Javascript onMarch 20, 2018

前言

最近碰到了比较多的关于vue的eventBus的问题,之前定技术选型的时候也被问到了,vuex和eventBus的使用范围。所以简单的写一下。同时有一种特殊的实现方案。

有这么几种数据传递方式,vuex、props、eventBus和特殊的eventBus。

vuex

不介绍,数据量和复杂度达不到不用它你才会向下看。

props

demo

父子组件传值,官方api,只写个demo。

1.父组件

<son :info="info" @update="updateHandler"/>
// data
info: 'sendToSon'
// methods
updateHandler (newVal) {
 this.info = newVal
}

2.子组件

// props
props: ['info']
// 向上传值,某个方法中使用
this.$emit('update', 'got')

父向子传值-->props 子向父传值-->子组件绑定事件回调定义在父组件,子组件触发此事件。 因不推荐子组件内直接修改父组件传入的props,需使用自定义事件。

限制

父子组件。

eventBus

demo

bus皆为导入的bus实例

// bus
const bus = new Vue()
// 数据接收组件
// 当前组件接收值则
bus.$on('event1', (val)=>{})
// 数据发出组件
// 当前组件发出值则
bus.$emit('event1', val)

可以看出本质是一个vue实例充当事件绑定的媒介。 在所有实例中使用其进行数据的通信。

双(多)方使用同名事件进行沟通。

问题

  1. $emit时,必须已经 $on,否则将无法监听到事件,也就是说对组件是有一定的同时存在的要求的。(注:路由切换时,新路由组件先 created,旧路由组件再destoryed,部分情况可以分别写入这两个生命周期,见此问题)。
  2. $on在组件销毁后不会自动解除绑定,若同一组件多次生成则会多次绑定事件,则会一次 $emit,多次响应,需额外处理。
  3. 数据非“长效”数据,无法保存,只在 $emit后生效。

所以是否有一种更适用的方案呢?

特殊的eventBus?

demo

我们先来看个代码,线上代码。 bus皆为导入的bus实例。

// bus
const 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
 }
}

不同

  1. 正统的eventBus只是用来绑定和触发事件,并不关心数据,不与数据发生交集。而这个方案多一步将数据直接添加在bus实例上。且事件监听与数据添加需提前定义好。
  2. 数据接收方不再使用$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
 })
}

数据接收组件改为

// template
data中获取直接修改值:{{dataResult}}
data中获取直接修改值的父层:{{dataVal}}
computed中依赖直接修改值:{{computedResult}}
// js
data () {
  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架构的理解和使用也没有那么难不是吗。

总结

以上所述是小编给大家介绍的vue数据传递--我有特殊的实现技巧,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery 简单图片导航插件jquery.imgNav.js
Mar 17 Javascript
新鲜出炉的js tips提示效果
Apr 03 Javascript
Javascript自定义排序 node运行 实例
Jun 05 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
Feb 05 Javascript
多个jQuery版本共存的处理方案
Mar 17 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
Nov 15 Javascript
基于JavaScript实现拖动滑块效果
Feb 16 Javascript
es6学习笔记之Async函数的使用示例
May 11 Javascript
详解angularjs实现echart图表效果最简洁教程
Nov 29 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
Dec 21 Javascript
详解Angular6学习笔记之主从组件
Sep 05 Javascript
Vue跨域请求问题解决方案过程解析
Aug 07 Javascript
手写Node静态资源服务器的实现方法
Mar 20 #Javascript
JS 实现缓存算法的示例(FIFO/LRU)
Mar 20 #Javascript
react-native封装插件swiper的使用方法
Mar 20 #Javascript
在vue项目中使用sass的配置方法
Mar 20 #Javascript
webpack vue项目开发环境局域网访问方法
Mar 20 #Javascript
动态加载、移除js/css文件的示例代码
Mar 20 #Javascript
webpack 打包压缩js和css的方法示例
Mar 20 #Javascript
You might like
使用php来实现网络服务
2009/09/15 PHP
Linux下源码包安装Swoole及基本使用操作图文详解
2019/04/02 PHP
php设计模式之建造器模式分析【星际争霸游戏案例】
2020/01/23 PHP
BOOM vs RR BO3 第二场2.13
2021/03/10 DOTA
js 页面输出值
2008/11/30 Javascript
JavaScript 学习小结(适合新手参考)
2009/07/30 Javascript
js返回上一页并刷新代码整理
2012/12/21 Javascript
jquery获取元素值的方法(常见的表单元素)
2013/11/15 Javascript
javascript数组克隆简单实现方法
2015/12/16 Javascript
Node.js编写组件的三种实现方式
2016/02/25 Javascript
JavaScript 2048 游戏实例代码(简单易懂)
2016/03/25 Javascript
详解JavaScript中双等号引起的隐性类型转换
2016/05/30 Javascript
原生js实现回复评论功能
2017/01/18 Javascript
JavaScript实现打地鼠小游戏
2020/04/23 Javascript
Javascript循环删除数组中元素的几种方法示例
2017/05/18 Javascript
浅谈React Native 中组件的生命周期
2017/09/08 Javascript
老生常谈JavaScript面向对象基础与this指向问题
2017/10/16 Javascript
微信小程序自定义组件之可清除的input组件
2018/07/17 Javascript
Webpack之tree-starking 解析
2018/09/11 Javascript
动态实现element ui的el-table某列数据不同样式的示例
2021/01/22 Javascript
微信小程序input抖动问题的修复方法
2021/03/03 Javascript
使用Python脚本在Linux下实现部分Bash Shell的教程
2015/04/17 Python
Python读取图片属性信息的实现方法
2016/09/11 Python
python3.5 + PyQt5 +Eric6 实现的一个计算器代码
2017/03/11 Python
python+matplotlib演示电偶极子实例代码
2018/01/12 Python
Python函数基础实例详解【函数嵌套,命名空间,函数对象,闭包函数等】
2019/03/30 Python
python3.6 tkinter实现屏保小程序
2019/07/30 Python
Python动态导入模块:__import__、importlib、动态导入的使用场景实例分析
2020/03/30 Python
python函数调用,循环,列表复制实例
2020/05/03 Python
为什么称python为胶水语言
2020/06/16 Python
Python中猜拳游戏与猜筛子游戏的实现方法
2020/09/04 Python
VELTRA台湾:世界自由行专家
2017/08/15 全球购物
公司活动总结怎么写
2014/06/25 职场文书
2016春节慰问信范文
2015/03/25 职场文书
公积金具结保证书
2015/05/11 职场文书
什么是求职信?求职信应包含哪些内容?
2019/08/14 职场文书