序言：

更新

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", "北京");
    },

展示頁面

{{this.$store.state.city}}

作者：艾爾丶Lawliet
連結：