序言：

更新源代码

6种方法对应6个分支，不懂的切换分支，可以直接在src替换vue-props文件夹里面文件

下载文件记得先安装依赖，npm install

然后在启动 npm run dev

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

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

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

整理下思路：父组件调用子组件dom位置声明一个名称，然后在子组件接收这名称，就可以直接调用

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

####子组件

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主要做数据交互，维护公共状态或数据

多看几遍这图，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>