vue 6种通信总结

序言：

更新源代码

6个分支，不懂的切换分支，可以直接在src文件替换vue-props文件夹里面文件
下载文件记得先安装依赖，npm install
然后在启动 npm run dev

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

• 组件间的父子之间的传值

• 组件间的子父之间的传值

• 非组件间的组件间的传值（简称：EventBus）

• sessionStorage缓存传值

• 路由带参数跳转进行传值

• vuex进行传值

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

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

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

image.png

子组件

image.png

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

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

子组件

image.png

父组件

image.png

---

3.非组件间的组件间的传值（简称：EventBus）

我先举个例子来解释下组件间的关联

组件A比作一个路由，通过中继器(eventBus.js)让其他房子接收到信号（组件B）

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

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

组件A

image.png

组件B

image.png

效果

sessionStorage

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

image.png

组件B

image.png

路由带参数跳转

路由默认的页面

image.png

路由其他页面 children

image.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>

作者：艾尔丶Lawliet
链接：https://www.jianshu.com/p/eaa3a3b577a3