这篇文章主要介绍了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中文网其他相关文章!

随着互联网的发展,SEO(SearchEngineOptimization,搜索引擎优化)已经成为了网站优化的重要一环。如果您想要使您的PHP网站在搜索引擎中获得更高的排名,就需要对SEO的内容有一定的了解了。本文将会介绍如何在PHP中实现SEO优化,内容包括网站结构优化、网页内容优化、外部链接优化,以及其他相关的优化技巧。一、网站结构优化网站结构对于S

随着电子商务和企业管理的发展,许多企业开始寻找更好的方法来处理其日常业务流程。ERP系统是一种能够整合企业各种业务流程的软件工具。它提供了全面的功能,包括生产、销售、采购、库存、财务等方面,帮助企业提高效率、控制成本和提高客户满意度。而在PHP编程语言中,也能够实现ERP系统,这就需要我们掌握一些基本的知识和技术。下面,我们将深入探讨如何在PHP中实现ERP

随着企业的发展,客户管理变得越来越重要。为了提高客户满意度和忠诚度,越来越多的企业采用客户关系管理系统(CRM)来帮助其管理客户关系。而PHP是一种流行的编程语言,因其简单易学、灵活和强大而被广泛应用于Web开发。那么,如何在PHP中实现CRM系统呢?本文将为您介绍实现CRM系统的步骤和技巧。Step1:需求分析在开始开发CRM系统之前,您需要进行需求分析

随着物联网技术的发展和普及,越来越多的应用场景需要使用PHP语言进行物联网开发。PHP作为一种广泛应用于Web开发的脚本语言,它的易学易用、开发速度快、可扩展性强等特点,使其成为开发物联网应用的一种优秀选择。本文将介绍在PHP中实现物联网开发的常用技术和方法。一、传输协议和数据格式物联网设备通常使用TCP/IP或UDP协议进行数据传输,而HTTP协议是一个优

随着互联网的发展,轮播图已经成为了网页设计中必不可少的一部分。在很多网页中,轮播图经常被用作展示企业文化、最新产品或是推广活动等场景。本篇文章将会分享如何使用PHP来实现轮播图的功能。一、轮播图的概念轮播图是网页中一种常见的视觉效果,一般由多个图片组成,在页面中自动或手动进行切换,展示多个内容。可以添加符合业务要求的动画效果,有助于引起用户的关注和提高网站的

随着互联网的不断发展,越来越多的网站需要使用验证码来保证安全性。验证码是一种借助人类能力而无法被计算机破解的认证技术,广泛应用于网站注册、登录、找回密码等功能中。下面将介绍如何使用PHP实现验证码功能。一、生成验证码图片验证码图片的生成是验证码功能的核心,需要生成一个随机字符,并将其渲染为图像展示给用户。在PHP中,可以使用GD库来生成图片。GD库是一种用于

智能合约(SmartContract)是一种基于区块链的自动化交易程序,可以实现自动化执行、验证和执行交易。智能合约可以减少交易中的人为干扰,提高交易的安全性和效率。在不同的区块链中,智能合约的实现方式略有不同。本文将介绍在PHP中如何实现智能合约。PHP是一种广泛使用的编程语言,特别适合Web开发。PHP有着成熟的开源生态系统,以及许多可靠的框架和库。在

管家婆系统在现代企业管理中扮演着重要的角色,它不仅仅能够有效地提高企业的工作效率,还可以大大提高了企业的生产力和竞争力。与此同时,PHP作为一种广泛使用的动态脚本语言,也受到了许多企业的青睐。接下来,我们将探讨如何在PHP中实现管家婆系统,以提高企业的管理效率。一、了解管家婆系统管家婆系统是一种企业管理软件,主要用于管理公司的财务、销售、采购、仓库、人力资源


热AI工具

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

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

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

WebStorm Mac版
好用的JavaScript开发工具

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

DVWA
Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

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