4种Vue组件通信方式实例分享
本文主要和大家分享4种Vue组件通信方式:父子组件的通信、非父子组件的eventBus通信、利用本地缓存实现组件通信、Vuex通信。希望能帮助到大家。
第一种通信方式:父子组件通信
父组件向子组件传递数据
父组件一共需要做4件事
1.import son from './son.js' 引入子组件 son
2.在components : {"son"} 里注册所有子组件名称
3.在父组件的template应用子组件,
4.如果需要传递数据给子组件,就在template模板里写
1 2 |
|
1 2 3 4 |
|
1 |
|
1 2 3 |
|
子组件只需要做1件事
1.用props接受数据,就可以直接使用数据
2.子组件接受到的数据,不能去修改。如果你的确需要修改,可以用计算属性,或者把数据赋值给子组件data里的一个变量
1 2 |
|
1 2 3 4 5 6 |
|
子组件向父组件传递数据
父组件一共需要做2件事情
在template里定义事件
在methods里写函数,监听子组件的事件触发
1 2 3 4 |
|
1 2 3 4 5 |
|
子组件一共需要1件事情
在数据变化后,用$emit触发即可
1 2 3 4 5 |
|
第二种通信方式: eventBus
eventBus这种通信方式,针对的是非父子组件之间的通信,它的原理还是通过事件的触发和监听。
但是因为是非父子组件的关系,他们需要有一个中间组件来连接。
我是使用的通过在根组件,也就是#app组件上定义了一个所有组件都可以访问到的组件,具体使用方式如下
使用eventBus传递数据,我们一共需要做3件事情
1.给app组件添加Bus属性 (这样所有组件都可以通过this.$root.Bus访问到它,而且不需要引入任何文件)
2.在组件1里,this.$root.Bus.$emit触发事件
3.在组件2里,this.$root.Bus.$on监听事件
1 2 3 4 5 6 7 8 |
|
1 2 3 4 |
|
1 2 3 4 |
|
第三种通信方式: 利用localStorage或者sessionStorage
这种通信比较简单,缺点是数据和状态比较混乱,不太容易维护。
通过window.localStorage.getItem(key) 获取数据
通过window.localStorage.setItem(key,value) 存储数据
注意用JSON.parse() / JSON.stringify() 做数据格式转换。
第四种通信方式: 利用Vuex
Vuex比较复杂,可以单独写一篇
相关推荐:
以上是4种Vue组件通信方式实例分享的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

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

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

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

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

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

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

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

Dreamweaver CS6
视觉化网页开发工具

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

上篇文章(链接),小枣君给大家介绍了宽带技术从ISDN、xDSL到10GPON的发展历程。今天,我们来聊聊即将到来的新一代光纤宽带技术——50GPON。█F5G和F5G-A介绍50GPON之前,先说说F5G和F5G-A。2020年2月,ETSI(欧洲电信标准化协会)推进了一套以10GPON+FTTR、Wi-Fi6、200G光传送/汇聚、OXC等技术为基础的固定通信网络技术体系,并将其命名为F5G,也就是第五代固网通信技术(The5thgenerationFixednetworks)。F5G是固网

Vue与服务器端通信的探析:处理断网情况的策略引言:在现代Web开发中,Vue.js已成为一种广泛使用的前端框架。然而,由于网络环境的不稳定性,处理断网情况是一个需要我们考虑的重要问题。本文将分析如何在Vue中处理断网情况,并给出相应的代码示例。一、断网情况分析在网络状况较好的情况下,Vue可以通过Ajax请求或WebSocket与服务器进行通信。但是,

在如今这个数字时代,宽带已经成为我们每个人、每个家庭的生活必需品。如果没有它,我们会坐立难安、心绪不宁。那么,你知道宽带背后的技术原理吗?从最早期的56k“猫”拨号,到现在的千兆城市、千兆家庭,我们的宽带技术到底经历了怎样的变革?今天这篇文章,我们就来详细了解一下——“宽带的故事”。█xDSL和ISDN下面这个界面,你见过吗?我相信很多70后80后的小伙伴,肯定见过,并且非常熟悉。没错,这就是当年我们最初接触互联网时,进行“拨号上网”的界面。那还是20多年前,小枣君还在上大学的时候。为了上网,我

原文标题:《无线鼠标到底是怎么做到无线的?》无线鼠标慢慢成了现在办公电脑的标配,从此再也不用拖着长长的线跑来跑去了。可是,无线鼠标是怎么工作的呢?今天我们一起来学习一下No.1无线鼠标的发展史你知道吗,无线鼠标现在也已经40岁了,1984年的时候,罗技研制了世界上第一款无线鼠标,不过这个无线鼠标采用红外线作为信号的载体,据说长得像下面图片这个样子,后面由于性能原因而宣告失败。直到十年后的1994年,罗技终于研发成功了一个工作在27MHz的无线鼠标,这个27MHz频率也成了很长一段时间内,无线鼠标

PHP是一种常用的开发语言,可以用于开发各种Web应用程序。除了常见的HTTP请求和响应以外,PHP也支持通过Socket进行网络通信,实现更为灵活和高效的数据交互。本文将介绍PHP如何实现Socket通信的方法与技巧,并附上具体的代码示例。什么是Socket通信Socket是一种在网络中进行通信的方法,可以在不同的计算机之间传输数据。通过S

7月25日消息,吉林移动、中兴通讯现已在长白山主峰完成基于2.6G频段(100+60M)加700M频段(30M)三载波聚合商用,现场测试峰值速率最高可达2.53Gbps以上。官方指出,长白山是中华十大名山之一,现为国家AAAAA级旅游景区、世界地质公园、世界生物圈保护区、世界最佳自然保护地,2023年接待游客数达到274.77万人次,本次部署3CC将极大满足用户的网络需求。据介绍,吉林移动2024年初已经率先完成2.6G(100+60M)加4.9G(100M)频段三载波组网载波聚合试点,下载峰值

诺基亚今日宣布,将其设备管理和服务管理平台业务以1.85亿欧元的价格出售给Lumine集团,预计明年第一季度完成根据我们的调查发现,Lumine是一家通信和媒体软件公司,最近从ConstellationSoftware分拆出来。作为交易的一部分,预计会有大约500名诺基亚员工加入Lumine据公开资料显示,这些平台的业务主要是诺基亚通过之前两次收购Motive和mFormation形成的。Lumine称其有意恢复Motive品牌,并将其作为一个独立的业务部门Lumine表示,收购价格包括一笔高达

Golang是一门功能强大且高效的编程语言,可以用于开发各种应用程序和服务。在Golang中,指针是一种非常重要的概念,它可以帮助我们更灵活和高效地操作数据。指针转换是指在不同类型之间进行指针操作的过程,本文将通过具体的实例来学习Golang中指针转换的最佳实践。1.基本概念在Golang中,每个变量都有一个地址,地址就是变量在内存中的位置。
