整理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 ...
随机推荐
- MySQL Server 的安装方法及简要步骤
闲扯两句: 小弟不才,由于缺乏明确的职业规划,初毕业的那两年从事的是网络管理工作,接触最多的是计算机硬件和网络设备. 近几年才开始转向DB行业,最初是自学,过程中走了不少弯路,后来参加的专职的DBA培 ...
- clearTimeout方法在IE上的兼容问题
今天在修改公司项目的bug时发现一个问题,出错代码如下: clearTimeout(); setTimeout(function(){ // 具体业务逻辑 },100); 这段代码在chrome.fi ...
- linux 服务器常用命令整理
linux 服务器常用命令整理 目录 网络分析 - tcpdump \ telnet \ (netstat \ ss \ lsof) \ nload 网络传输 - scp \ rsync \ (rz ...
- ***微信小程序学习文档和资料归档收集
微信小程序官方文档: https://cloud.tencent.com/document/product/619 小程序培训视频教程: https://xw.qq.com/edu/201805140 ...
- macos 命令行安装 ipa
macos 命令行安装 ipa 苹果发神经后itunes已经无法在安装app了,如果有知道的兄弟可以告诉我啊 ideviceinstaller 使用这个开源项目可以在macos下安装app brew ...
- vs2017更新出错:The entire Box execution exiting with result code: 0x0
在将vs2017 15.7.4更新至15.9.5出现“The entire Box execution exiting with result code: 0x0”错误,也就是文件解压下载开始安装后, ...
- 使用Cordova打包Vue项目
因为公司项目要求, 原本的vue移动端项目, 现在要求能使用定位, 调用摄像头等功能, 并且开发成混合APP. 一个小白的孤军奋战史, 记录一下, 以备后用.... 第一步: 安装cordova 在命 ...
- 光纤网卡与HBA卡区别
1.简介 光纤网卡 ,指的是光纤以太网适配器,简称光纤网卡,学名Fiber Ethernet Adapter.传输输的是以太网通信协议,一般通过光纤线缆与光纤以太网交换机连接.按传输速率可以分为100 ...
- 3dmax 笔记本电脑
一般来说,苹果MacBook系列适合运行3ds Max. 3ds Max是一款大型图像处理软件,对电脑硬件要求高.在所有MacBook系列中,配备Retina屏幕的MacBook Pro 15寸是最佳 ...
- 19.3.5日,报关于表单验证和ui-router
今天完成的事情: (1)学习angularJS表单验证 可以验证的内容<input type="text" minlength="2" maxlength ...