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实现带动画效果的经典二级导航菜单
Mar 22 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
Dec 18 Javascript
AngularJS控制器controller正确的通信的方法
Jan 25 Javascript
JavaScript实现分页效果
Mar 28 Javascript
基于pako.js实现gzip的压缩和解压功能示例
Jun 13 Javascript
JavaScript如何获取到导航条中HTTP信息
Oct 10 Javascript
jQuery Validate插件ajax方式验证输入值的实例
Dec 21 jQuery
基于Vue的延迟加载插件vue-view-lazy
May 21 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
Jul 10 Javascript
原生js实现密码强度验证功能
Mar 18 Javascript
JS原形与原型链深入详解
May 09 Javascript
Vue 修改网站图标的方法
Dec 31 Vue.js
手写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字符过滤函数去除字符串最后一个逗号(rtrim)
2013/03/26 PHP
PHP内置加密函数详解
2016/11/20 PHP
PHP面向对象多态性实现方法简单示例
2017/09/27 PHP
实现连缀调用的map方法(prototype)
2009/08/05 Javascript
一个基于jQuery的树型插件(OrangeTree)使用介绍
2012/05/03 Javascript
文本域光标操作的jQuery扩展分享
2014/03/10 Javascript
javascript的switch用法注意事项分析
2015/02/02 Javascript
AngularJS 让人爱不释手的八种功能
2016/03/23 Javascript
Boostrap入门准备之border box
2016/05/09 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
2016/07/12 Javascript
微信小程序 实战小程序实例
2016/10/08 Javascript
不使用script导入js文件的几种方法
2016/10/27 Javascript
js实现右键菜单功能
2016/11/28 Javascript
详解前端路由实现与react-router使用姿势
2017/08/07 Javascript
angular 实现的输入框数字千分位及保留几位小数点功能示例
2018/06/19 Javascript
十分钟教你上手ES2020新特性
2020/02/12 Javascript
[01:32:10]NAVI vs VG Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
Python使用Tkinter实现机器人走迷宫
2018/01/22 Python
TensorFlow入门使用 tf.train.Saver()保存模型
2018/04/24 Python
selenium设置proxy、headers的方法(phantomjs、Chrome、Firefox)
2018/11/29 Python
Django组件之cookie与session的使用方法
2019/01/10 Python
浅谈python3.6的tkinter运行问题
2019/02/22 Python
Python3.5多进程原理与用法实例分析
2019/04/05 Python
python f-string式格式化听语音流程讲解
2019/06/18 Python
python随机生成大小写字母数字混合密码(仅20行代码)
2020/02/01 Python
Python基于模块Paramiko实现SSHv2协议
2020/04/28 Python
使用pandas实现筛选出指定列值所对应的行
2020/12/13 Python
CSS实现限制字数功能当对象内文本溢出时显示省略标记
2014/08/20 HTML / CSS
印尼最大的在线购物网站:MatahariMall.com
2016/08/26 全球购物
Clarria化妆品官方网站:购买天然和有机化妆品系列
2018/04/08 全球购物
美国时尚假发购物网站:Wigsbuy
2019/04/06 全球购物
德国净水壶和滤芯品牌:波尔德PearlCo(家用净水器)
2020/04/29 全球购物
简述你对Statement,PreparedStatement,CallableStatement的理解
2013/03/25 面试题
综合素质的自我鉴定
2013/10/07 职场文书
餐饮业的创业计划书范文
2013/12/26 职场文书
先进个人主要事迹范文
2015/11/04 职场文书