整理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组件通信方式的更多相关文章

  1. Vue组件通信方式全面详解

    vue组件通信方式全面详解 众所周知,Vue主要思想就是组件化开发.因为,在实际的项目开发中,肯定会以组件的开发模式进行.形如页面和页面之间需要通信一样,Vue 组件和组件之间肯定也需要互通有无.共享 ...

  2. Vue组件通信方式(一)

    组件与组件的关系,通常有父子关系,兄弟关系以及隔代关系. 针对不同的场景,如何选用适合的通信方式呢? (一) props/$emit parentComponent ==> childCompo ...

  3. Vue组件通信方式(8种)

    1.一图认清组件关系名词 父子关系:A与B.A与C.B与D.C与E 兄弟关系:B与C 隔代关系:A与D.A与E 非直系亲属:D与E 总结为三大类: 父子组件之间通信 兄弟组件之间通信 跨级通信 2.8 ...

  4. 最全的Vue组件通信方式总结

    1.一图认清组件关系名词 父子关系:A与B.A与C.B与D.C与E 兄弟关系:B与C 隔代关系:A与D.A与E 非直系亲属:D与E 总结为三大类: 父子组件之间通信 兄弟组件之间通信 跨级通信 2.8 ...

  5. vue组件通信方式总结

    对于vue来说,组件之间的消息传递是非常重要的,下面是我对组件之间消息传递的各种方式的总结,总共有8种方式. 1. props和$emit 父组件向子组件传递数据是通过prop传递的,子组件传递数据给 ...

  6. vue组件通信方式(多种方案)

    一.Props传递数据 components |-Grandson1.vue //孙子1 |-Grandson2.vue //孙子2 |-Parent.vue //父亲 |-Grandson1.vue ...

  7. Vue组件间通信6种方式

    摘要: 总有一款合适的通信方式. 作者:浪里行舟 Fundebug经授权转载,版权归原作者所有. 前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的 ...

  8. 封装Vue组件的一些技巧

    封装Vue组件的一些技巧 本文同步在个人博客shymean.com上,欢迎关注 写Vue有很长一段时间了,除了常规的业务开发之外,也应该思考和反思一下封装组件的正确方式.以弹窗组件为例,一种实现是在需 ...

  9. Vue 组件间传值

    前言 Vue 作为现在比较火的框架之一,相信您在使用的过程中,也会遇到组件间传值的情况,本文将讲解几种 Vue 组件间传值的几种方法,跟着小编一起来学习一下吧! 实现 注意: 学习本文,需要您对 Vu ...

随机推荐

  1. face++ php

    总流程是先上传文件,保存到后台,获取返回来的face_token保存下来,然后拿face_token添加到faceSet里面去,搜索的时候结果会返回faceSet里面的face_token 1.dem ...

  2. Java软件工程的弹幕调试原则

    日期:2019.4.25 博客期:054 星期四 今天是把很久之前的那个相关程序——一维数组的最大和的子数组的求取信息,我们今天的任务就是把每一步的信息都要进行输出查看! 如下图: package p ...

  3. LoadRunner基础知识

    什么是自动化性能测试?利用产品.人员和流程来降低应用程序.升级程序或补丁程序部署风险的一种手段 什么是自动化性能测试的核心?向预部署系统施加工作负载,同时评估系统性能和最终用户体验 LoadRunne ...

  4. CSS 屏幕大小自适应

    要想实现css屏幕大小自适应,首先得引入 CSS3 @media 媒体查询器: media的使用和规则: ①被链接文档将显示在什么设备上. ②用于为不同的媒介类型规定不同的样式. 语法:  @medi ...

  5. jdbc连接数据库以及crud(简单易懂,本人亲测可用 有源代码和数据库)

    今天呢!重新整理了一边jdbc的相关操作:现在来说对于很多框架都使用mybatis和hibernate来操作数据库 ,也有很多使用自己简单封装的ssm或者是其他的一些框架来操作数据库,但是无论使用哪一 ...

  6. Bean拷贝

    相当于C#的AutoMapper public class CloneUtils { /** * 拷贝对象 * @param source * @param classType * @return * ...

  7. Lua脚本在redis分布式锁场景的运用

    目录 锁和分布式锁 锁是什么? 为什么需要锁? Java中的锁 分布式锁 redis 如何实现加锁 锁超时 retry redis 如何释放锁 不该释放的锁 通过Lua脚本实现锁释放 用redis做分 ...

  8. (二)shell中的变量

    1.常用系统变量 $HOME.$PWD.$SHELL.$USER等 2.自定义变量 基本语法: (1)定量变量:变量=值 (2)撤销变量:unset 变量 (3)声明静态变量:readonly变量 注 ...

  9. excel导出使用get请求参数过长问题

    遇到的问题: excel导出功能时,使用的是window.location.href=url也就是get请求.当传入参数过长的时候就报了414,地址过长的错误. 解决思路: 将get请求换为post请 ...

  10. C++ 初读vector

    vector 向量(Vector)是一个封装了动态大小数组的顺序容器(Sequence Container).跟任意其它类型容器一样,它能够存放各种类型的对象. Character 高效 C++标准要 ...