序言：

这几天研究下vue各种通信方法，顺便做个笔记 6个分支分别对应各种方法源代码

常用vue通信大概有这几种方式进行：

组件间的父子之间的传值
组件间的子父之间的传值
非组件间的组件间的传值（简称：EventBus）
sessionStorage缓存传值
路由带参数跳转进行传值
vuex进行传值

1. 组件间的父子之间的传值

理一下思路：两个组件间有父子关系，怎么样把父组件的值给儿子们知道，我们就要在调用儿子组件的位置赋值给一个自定义名称，然后在儿子组件接受这个名称，就能取到这个值

父组件（谁是父组件个人理解：谁引用谁的组件，谁就是父组件）

子组件

2.组件间的子父之间的传值

理一下思路：在子组件通过触发一个事件带值，让父组件接受这个事件，解析这个值

子组件

父组件

## 3.非组件间的组件间的传值（简称：EventBus）我先举个例子来解释下组件间的关联 ##### 组件A比作一个路由，通过中继器(eventBus.js)让其他房子接收到信号（组件B）

首先在src目录下创建一个eventBus.js文件，复制这行代码进去

import Vue from 'vue'
let connect = new Vue()    // 实例
export default connect

组件A

组件B

效果

sessionStorage

组件A，感觉用法和上一篇差不多，就不在一一叙述

组件B

路由带参数跳转

路由默认的页面

路由其他页面 children

效果

vuex主要做数据交互，维护公共状态或数据

src下创建一个store的文件夹，里面创建index.js文件

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
   state: {
   city: "上海"
   },

   actions: {
     handleCity(ctx, city) {
   // console.log(ctx, city)
       ctx.commit("handleCity", city)
    }
  },
mutations: {
     handleCity(state, city) {
      state.city = city
   }
   }
})

某文件触发事件

methods: {
    handleCityClick(city) {
      this.$store.dispatch("handleCity", "北京");
    },

展示页面

<h1>{{this.$store.state.city}}</h1>

vue 6种通信总结

序言：