序言：
装载 自己记录下，以便日后学习
更新源代码
6个分支，不懂的切换分支，可以直接在src文件替换vue-props文件夹里面文件
下载文件记得先安装依赖，npm install
然后在启动npm run dev
常用vue通信大概有这几种方式进行：
- 组件间的父子之间的传值
- 组件间的子父之间的传值
- 非组件间的组件间的传值（简称：EventBus）
- sessionStorage缓存传值
- 路由带参数跳转进行传值
- vuex进行传值
1. 组件间的父子之间的传值
整理一下思路：父组件调用子组件dom位置声明一个名称，然后在子组件接收这名称，就可以直接调用
父组件（谁是父组件个人理解：谁引用谁的组件，谁就是父组件）
image
子组件
image
2.组件间的子父之间的传值
理一下思路：在子组件通过触发一个事件带值，让父组件接受这个事件，解析这个值
子组件
image
父组件
image
3.非组件间的组件间的传值（简称：EventBus）
我先举个例子来解释下组件间的关联
组件A比作一个路由，通过中继器(eventBus.js)让其他房子接收到信号（组件B）
首先在src目录下创建一个eventBus.js文件，复制这行代码进去
import Vue from 'vue'
let connect = new Vue() // 实例
export default connect
组件A
image
组件B
效果
6206911-11e578e73f01bf23.png
sessionStorage
组件A，感觉用法和上一篇差不多，就不在一一叙述
组件B
6206911-cf85f87b92e98ef9.png
路由带参数跳转
路由默认的页面
6206911-1eb300574954b5d7.png
路由其他页面 children
6206911-f1a894d3dd973694.png
效果
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>
