序言：

装载 自己记录下，以便日后学习

更新源代码

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>