整理4种Vue组件通信方式
整理4种Vue组件通信方式
重点是梳理了前两个,父子组件通信和eventBus通信,我觉得Vue文档里的说明还是有一些简易,我自己第一遍是没看明白。
- 父子组件的通信
- 非父子组件的eventBus通信
- 利用本地缓存实现组件通信
- Vuex通信
第一种通信方式:父子组件通信
父组件向子组件传递数据
父组件一共需要做4件事
- 1.import son from './son.js' 引入子组件 son
- 2.在components : {"son"} 里注册所有子组件名称
- 3.在父组件的template应用子组件, <son></son>
- 4.如果需要传递数据给子组件,就在template模板里写 <son :num="number"></son>
// 1.引入子组件 import counter from './counter'
import son from './son'
// 2.在ccmponents里注册子组件 components : {
counter,
son
},
// 3.在template里使用子组件 <son></son>
// 4.如果需要传递数据,也是在templete里写 <counter :num="number"></counter>
子组件只需要做1件事
- 1.用props接受数据,就可以直接使用数据
- 2.子组件接受到的数据,不能去修改。如果你的确需要修改,可以用计算属性,或者把数据赋值给子组件data里的一个变量
// 1.用Props接受数据
props: [
'num'
], // 2.如果需要修改得到的数据,可以这样写
props: [
'num'
],
data () {
return {
number : this.num
}
},
子组件向父组件传递数据
父组件一共需要做2件事情
- 在template里定义事件
- 在methods里写函数,监听子组件的事件触发
// 1. 在templete里应用子组件时,定义事件changeNumber
<counter :num="number"
@changeNumber="changeNumber"
>
</counter>
// 2. 用changeNumber监听事件是否触发
methods: {
changeNumber(e){
console.log('子组件emit了',e);
this.number = e
},
}
子组件一共需要1件事情
- 在数据变化后,用$emit触发即可
// 1. 子组件在数据变化后,用$emit触发即可,第二个参数可以传递参数
methods: {
increment(){
this.number++
this.$emit('changeNumber', this.number)
},
}
第二种通信方式: eventBus
eventBus这种通信方式,针对的是非父子组件之间的通信,它的原理还是通过事件的触发和监听。
但是因为是非父子组件的关系,他们需要有一个中间组件来连接。
我是使用的通过在根组件,也就是#app组件上定义了一个所有组件都可以访问到的组件,具体使用方式如下
使用eventBus传递数据,我们一共需要做3件事情
- 1.给app组件添加Bus属性 (这样所有组件都可以通过this.$root.Bus访问到它,而且不需要引入任何文件)
- 2.在组件1里,this.$root.Bus.$emit触发事件
- 3.在组件2里,this.$root.Bus.$on监听事件
// 1.在main.js里给app组件,添加bus属性
import Vue from 'vue' new Vue({
el: '#app',
components: { App },
template: '<App/>',
data(){
return {
Bus : new Vue()
}
}
})
// 2.在组件1里,触发emit increment(){
this.number++
this.$root.Bus.$emit('eventName', this.number)
},
// 3.在组件2里,监听事件,接受数据 mounted(){
this.$root.Bus.$on('eventName', value => {
this.number = value
console.log('busEvent');
})
},
第三种通信方式: 利用localStorage或者sessionStorage
这种通信比较简单,缺点是数据和状态比较混乱,不太容易维护。
通过window.localStorage.getItem(key) 获取数据
通过window.localStorage.setItem(key,value) 存储数据
注意用JSON.parse() / JSON.stringify() 做数据格式转换。
第四种通信方式: 利用Vuex
Vuex比较复杂,可以单独写一篇
整理4种Vue组件通信方式的更多相关文章
- Vue组件通信方式全面详解
vue组件通信方式全面详解 众所周知,Vue主要思想就是组件化开发.因为,在实际的项目开发中,肯定会以组件的开发模式进行.形如页面和页面之间需要通信一样,Vue 组件和组件之间肯定也需要互通有无.共享 ...
- Vue组件通信方式(一)
组件与组件的关系,通常有父子关系,兄弟关系以及隔代关系. 针对不同的场景,如何选用适合的通信方式呢? (一) props/$emit parentComponent ==> childCompo ...
- Vue组件通信方式(8种)
1.一图认清组件关系名词 父子关系:A与B.A与C.B与D.C与E 兄弟关系:B与C 隔代关系:A与D.A与E 非直系亲属:D与E 总结为三大类: 父子组件之间通信 兄弟组件之间通信 跨级通信 2.8 ...
- 最全的Vue组件通信方式总结
1.一图认清组件关系名词 父子关系:A与B.A与C.B与D.C与E 兄弟关系:B与C 隔代关系:A与D.A与E 非直系亲属:D与E 总结为三大类: 父子组件之间通信 兄弟组件之间通信 跨级通信 2.8 ...
- vue组件通信方式总结
对于vue来说,组件之间的消息传递是非常重要的,下面是我对组件之间消息传递的各种方式的总结,总共有8种方式. 1. props和$emit 父组件向子组件传递数据是通过prop传递的,子组件传递数据给 ...
- vue组件通信方式(多种方案)
一.Props传递数据 components |-Grandson1.vue //孙子1 |-Grandson2.vue //孙子2 |-Parent.vue //父亲 |-Grandson1.vue ...
- Vue组件间通信6种方式
摘要: 总有一款合适的通信方式. 作者:浪里行舟 Fundebug经授权转载,版权归原作者所有. 前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的 ...
- 封装Vue组件的一些技巧
封装Vue组件的一些技巧 本文同步在个人博客shymean.com上,欢迎关注 写Vue有很长一段时间了,除了常规的业务开发之外,也应该思考和反思一下封装组件的正确方式.以弹窗组件为例,一种实现是在需 ...
- Vue 组件间传值
前言 Vue 作为现在比较火的框架之一,相信您在使用的过程中,也会遇到组件间传值的情况,本文将讲解几种 Vue 组件间传值的几种方法,跟着小编一起来学习一下吧! 实现 注意: 学习本文,需要您对 Vu ...
随机推荐
- face++ php
总流程是先上传文件,保存到后台,获取返回来的face_token保存下来,然后拿face_token添加到faceSet里面去,搜索的时候结果会返回faceSet里面的face_token 1.dem ...
- Java软件工程的弹幕调试原则
日期:2019.4.25 博客期:054 星期四 今天是把很久之前的那个相关程序——一维数组的最大和的子数组的求取信息,我们今天的任务就是把每一步的信息都要进行输出查看! 如下图: package p ...
- LoadRunner基础知识
什么是自动化性能测试?利用产品.人员和流程来降低应用程序.升级程序或补丁程序部署风险的一种手段 什么是自动化性能测试的核心?向预部署系统施加工作负载,同时评估系统性能和最终用户体验 LoadRunne ...
- CSS 屏幕大小自适应
要想实现css屏幕大小自适应,首先得引入 CSS3 @media 媒体查询器: media的使用和规则: ①被链接文档将显示在什么设备上. ②用于为不同的媒介类型规定不同的样式. 语法: @medi ...
- jdbc连接数据库以及crud(简单易懂,本人亲测可用 有源代码和数据库)
今天呢!重新整理了一边jdbc的相关操作:现在来说对于很多框架都使用mybatis和hibernate来操作数据库 ,也有很多使用自己简单封装的ssm或者是其他的一些框架来操作数据库,但是无论使用哪一 ...
- Bean拷贝
相当于C#的AutoMapper public class CloneUtils { /** * 拷贝对象 * @param source * @param classType * @return * ...
- Lua脚本在redis分布式锁场景的运用
目录 锁和分布式锁 锁是什么? 为什么需要锁? Java中的锁 分布式锁 redis 如何实现加锁 锁超时 retry redis 如何释放锁 不该释放的锁 通过Lua脚本实现锁释放 用redis做分 ...
- (二)shell中的变量
1.常用系统变量 $HOME.$PWD.$SHELL.$USER等 2.自定义变量 基本语法: (1)定量变量:变量=值 (2)撤销变量:unset 变量 (3)声明静态变量:readonly变量 注 ...
- excel导出使用get请求参数过长问题
遇到的问题: excel导出功能时,使用的是window.location.href=url也就是get请求.当传入参数过长的时候就报了414,地址过长的错误. 解决思路: 将get请求换为post请 ...
- C++ 初读vector
vector 向量(Vector)是一个封装了动态大小数组的顺序容器(Sequence Container).跟任意其它类型容器一样,它能够存放各种类型的对象. Character 高效 C++标准要 ...