vue组件通信的三种方式

brianway 发布于2019-08-20 17:38 / 2729人阅读

摘要：第一种方式就是官方推荐的官方推荐方式有时候两个组件也需要通信非父子关系。在简单的场景下，可以使用一个空的实例作为中央事件总线。组件对传入的对象进行的操作，组件进行的操作。

1. 第一种方式就是官方推荐的

官方推荐方式

有时候两个组件也需要通信(非父子关系)。在简单的场景下，可以使用一个空的 Vue 实例作为中央事件总线。

本质是通过派发事件然后监听事件从而更改值，(父子组件通信也可用这个方式，但是不同的一点就是父子组件通信的时候可以不用一个空的Vue实例来做中转，这种方式我这里就不做演示的了，因为我的题目是非父子通信)

空的Vue实例 bus

import Vue from "vue"

const bus = new Vue()
export default bus

组件add

// js

组件sub

// js

效果图

2.通过vuex来进行状态管理

官方状态管理

vuex我这里就不详细说了，网上教程太多。

3.取巧利用js中的对象的特性（指针）

Object在内存中存储只是保留指针，所以父组件通过props来给兄弟组件传递同一个对象，兄弟组件接收的对象跟父组件的对象都是指向同一个内存地址，故不管在哪里修改都能保持一致。

上代码，父组件把同一个对象传递给add组件和sub组件，那么add组件和sub组件接收到的对象也是指向父组件app的对象都是指向同一个内存地址。add组件对传入的对象进行+1的操作，sub组件进行-1的操作。

父组件 app.vue

// js
import addnum from "./components/add"
import subnum from "./components/sub"

export default {
  data() {
    return {
      share: {
        newNum: 1
      }
    }
  },
  components: {
    addnum, subnum
  }
}

子组件add.vue

//js

子组件sub.vue

// js

效果图

GPU服务器云服务器服务器的三种存储方式阿里云发送邮件的三种方式云计算的三种服务模式 asp支持的三种控件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83744.html

前端答疑-对象引用-vue共享数据源的三种方式

摘要：它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。状态自管理应用包含以下几个部分，驱动应用的数据源，以声明方式将映射到视图，响应在上的用户输入导致的状态变化。事情发生在上周（2019-06-06）团队技术分享的时候。起因在于一个问题：vue 中多个组件如何使用同一个变量，我们叫这个变量为 baseConfig 吧。说实话我没想到那么多人不理解...

JerryC 2019-08-23 18:02 评论0 收藏0
2017-09-16 前端日报

摘要：前端日报精选深入理解绑定请使用千位分隔符逗号表示网页中的大数字跨页面通信的各种姿势你所不知道的滤镜技巧与细节代码质量管控复杂度检测中文翻译基于与的三种代码分割范式掘金系列如何构建应用程序冷星的前端杂货铺第期美团旅行前端技术体系 2017-09-16 前端日报精选深入理解 js this 绑定请使用千位分隔符(逗号)表示web网页中的大数字跨页面通信的各种姿势你所不知道的 CSS 滤...

cheng10 2019-08-22 11:08 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

sutaking 2019-08-02 15:17 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

khs1994 2019-08-23 18:08 评论0 收藏0