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 相关文章推荐
禁止F5等快捷键的JS代码
Mar 06 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
Sep 06 Javascript
Bootstrap Table使用方法详解
Aug 01 Javascript
AngularJS中isolate scope的用法分析
Nov 22 Javascript
angular.js 路由及页面传参示例
Feb 24 Javascript
基于vue2的table分页组件实现方法
Mar 20 Javascript
在 Angular中 使用 Lodash 的方法
Feb 11 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
Mar 16 Javascript
vue-cli扩展多模块打包的示例代码
Apr 09 Javascript
vue路由拦截及页面跳转的设置方法
May 24 Javascript
100行代码实现一个vue分页组功能
Nov 06 Javascript
解决layui的使用以及针对select、radio等表单组件不显示的问题
Sep 05 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
地球防卫队:陪着奥特曼打小怪兽的人类力量 那些经典队服
2020/03/08 日漫
一个ftp类(ini.php)
2006/10/09 PHP
php正则表达式使用的详细介绍
2013/04/27 PHP
Laravel实现通过blade模板引擎渲染视图
2019/10/25 PHP
JQuery UI皮肤定制
2009/07/27 Javascript
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
2010/04/15 Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
2016/05/30 Javascript
JS实现图片的不间断连续滚动的简单实例
2016/06/03 Javascript
有关文件上传 非ajax提交 得到后台数据问题
2016/10/12 Javascript
浅析jQuery操作select控件的取值和设值
2016/12/07 Javascript
基于jQuery实现滚动刷新效果
2017/01/09 Javascript
微信小程序实现实时圆形进度条的方法示例
2017/02/24 Javascript
Easyui使用Dialog行内按钮布局的实例
2017/07/27 Javascript
JS 仿支付宝input文本输入框放大组件的实例
2017/11/14 Javascript
在vue里面设置全局变量或数据的方法
2018/03/09 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
2018/05/16 Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
2018/06/14 Javascript
详解vuex commit保存数据技巧
2018/12/25 Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
2019/03/06 Javascript
jQuery 实现扁平式小清新导航
2020/07/07 jQuery
vue实现移动端返回顶部
2020/10/12 Javascript
解决Vue-cli无法编译es6的问题
2020/10/30 Javascript
[02:42]2014DOTA2国际邀请赛 三冰专访:我会打到Ti20
2014/07/13 DOTA
python实现的简单RPG游戏流程实例
2015/06/28 Python
Python 迭代器工具包【推荐】
2016/05/06 Python
Python中%是什么意思?python中百分号如何使用?
2018/03/20 Python
Python3.6实现带有简单界面的有道翻译小程序
2019/04/16 Python
Python函数式编程实例详解
2020/01/17 Python
python如何处理程序无法打开
2020/06/16 Python
css3翻牌翻数字的示例代码
2020/02/07 HTML / CSS
幼儿师范毕业生自荐信
2013/11/09 职场文书
大学专科生推荐信范文
2013/11/23 职场文书
高中课前三分钟演讲稿
2014/08/18 职场文书
小学感恩节活动策划方案
2014/10/06 职场文书
群众路线教育实践活动心得体会(四风)
2014/11/03 职场文书
我收到了德劲DE1107
2022/04/05 无线电