这篇文章主要介绍了vue数据传递一些特殊梳理技巧,需要的朋友可以参考下
前言
最近碰到了比较多的关于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实例充当事件绑定的媒介。 在所有实例中使用其进行数据的通信。
双(多)方使用同名事件进行沟通。
问题
$emit时,必须已经 $on,否则将无法监听到事件,也就是说对组件是有一定的同时存在的要求的。(注:路由切换时,新路由组件先 created,旧路由组件再destoryed,部分情况可以分别写入这两个生命周期,见此问题)。
$on在组件销毁后不会自动解除绑定,若同一组件多次生成则会多次绑定事件,则会一次 $emit,多次响应,需额外处理。
数据非“长效”数据,无法保存,只在 $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 } }
不同
正统的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 }) }
数据接收组件改为
// 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数据传递--我有特殊的实现技巧的详细内容。更多信息请关注PHP中文网其他相关文章!

JavaScript在浏览器和Node.js环境中运行,依赖JavaScript引擎解析和执行代码。1)解析阶段生成抽象语法树(AST);2)编译阶段将AST转换为字节码或机器码;3)执行阶段执行编译后的代码。

Python和JavaScript的未来趋势包括:1.Python将巩固在科学计算和AI领域的地位,2.JavaScript将推动Web技术发展,3.跨平台开发将成为热门,4.性能优化将是重点。两者都将继续在各自领域扩展应用场景,并在性能上有更多突破。

Python和JavaScript在开发环境上的选择都很重要。1)Python的开发环境包括PyCharm、JupyterNotebook和Anaconda,适合数据科学和快速原型开发。2)JavaScript的开发环境包括Node.js、VSCode和Webpack,适用于前端和后端开发。根据项目需求选择合适的工具可以提高开发效率和项目成功率。

是的,JavaScript的引擎核心是用C语言编写的。1)C语言提供了高效性能和底层控制,适合JavaScript引擎的开发。2)以V8引擎为例,其核心用C 编写,结合了C的效率和面向对象特性。3)JavaScript引擎的工作原理包括解析、编译和执行,C语言在这些过程中发挥关键作用。

JavaScript是现代网站的核心,因为它增强了网页的交互性和动态性。1)它允许在不刷新页面的情况下改变内容,2)通过DOMAPI操作网页,3)支持复杂的交互效果如动画和拖放,4)优化性能和最佳实践提高用户体验。

C 和JavaScript通过WebAssembly实现互操作性。1)C 代码编译成WebAssembly模块,引入到JavaScript环境中,增强计算能力。2)在游戏开发中,C 处理物理引擎和图形渲染,JavaScript负责游戏逻辑和用户界面。

JavaScript在网站、移动应用、桌面应用和服务器端编程中均有广泛应用。1)在网站开发中,JavaScript与HTML、CSS一起操作DOM,实现动态效果,并支持如jQuery、React等框架。2)通过ReactNative和Ionic,JavaScript用于开发跨平台移动应用。3)Electron框架使JavaScript能构建桌面应用。4)Node.js让JavaScript在服务器端运行,支持高并发请求。

Python更适合数据科学和自动化,JavaScript更适合前端和全栈开发。1.Python在数据科学和机器学习中表现出色,使用NumPy、Pandas等库进行数据处理和建模。2.Python在自动化和脚本编写方面简洁高效。3.JavaScript在前端开发中不可或缺,用于构建动态网页和单页面应用。4.JavaScript通过Node.js在后端开发中发挥作用,支持全栈开发。


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

安全考试浏览器
Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。

禅工作室 13.0.1
功能强大的PHP集成开发环境

mPDF
mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),

SublimeText3汉化版
中文版,非常好用

Atom编辑器mac版下载
最流行的的开源编辑器