vue組件通信的三種方式

brianway 發布于2019-08-20 17:38 / 2886人閱讀

摘要：第一種方式就是官方推薦的官方推薦方式有時候兩個組件也需要通信非父子關系。在簡單的場景下，可以使用一個空的實例作為中央事件總線。組件對傳入的對象進行的操作，組件進行的操作。

1. 第一種方式就是官方推薦的

官方推薦方式

有時候兩個組件也需要通信(非父子關系)。在簡單的場景下，可以使用一個空的 Vue 實例作為中央事件總線。

本質是通過派發事件然后監聽事件從而更改值，(父子組件通信也可用這個方式，但是不同的一點就是父子組件通信的時候可以不用一個空的Vue實例來做中轉，這種方式我這里就不做演示的了，因為我的題目是非父子通信)

空的Vue實例 bus

import Vue from "vue"

const bus = new Vue()
export default bus

組件add

// js

組件sub

// js

效果圖

2.通過vuex來進行狀態管理

官方狀態管理

vuex我這里就不詳細說了，網上教程太多。

3.取巧利用js中的對象的特性（指針）

Object在內存中存儲只是保留指針，所以父組件通過props來給兄弟組件傳遞同一個對象，兄弟組件接收的對象跟父組件的對象都是指向同一個內存地址，故不管在哪里修改都能保持一致。

上代碼，父組件把同一個對象傳遞給add組件和sub組件，那么add組件和sub組件接收到的對象也是指向父組件app的對象都是指向同一個內存地址。add組件對傳入的對象進行+1的操作，sub組件進行-1的操作。

父組件 app.vue

// js
import addnum from "./components/add"
import subnum from "./components/sub"

export default {
  data() {
    return {
      share: {
        newNum: 1
      }
    }
  },
  components: {
    addnum, subnum
  }
}

子組件add.vue

//js

子組件sub.vue

// js

效果圖

GPU云服務器云服務器服務器的三種存儲方式阿里云發送郵件的三種方式云計算的三種服務模式 asp支持的三種控件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83744.html

前端答疑-對象引用-vue共享數據源的三種方式

摘要：它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。狀態自管理應用包含以下幾個部分，驅動應用的數據源，以聲明方式將映射到視圖，響應在上的用戶輸入導致的狀態變化。事情發生在上周（2019-06-06）團隊技術分享的時候。起因在于一個問題：vue 中多個組件如何使用同一個變量，我們叫這個變量為 baseConfig 吧。說實話我沒想到那么多人不理解...

JerryC 2019-08-23 18:02 評論0 收藏0
2017-09-16 前端日報

摘要：前端日報精選深入理解綁定請使用千位分隔符逗號表示網頁中的大數字跨頁面通信的各種姿勢你所不知道的濾鏡技巧與細節代碼質量管控復雜度檢測中文翻譯基于與的三種代碼分割范式掘金系列如何構建應用程序冷星的前端雜貨鋪第期美團旅行前端技術體系 2017-09-16 前端日報精選深入理解 js this 綁定請使用千位分隔符(逗號)表示web網頁中的大數字跨頁面通信的各種姿勢你所不知道的 CSS 濾...

cheng10 2019-08-22 11:08 評論0 收藏0
關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

sutaking 2019-08-02 15:17 評論0 收藏0
關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

khs1994 2019-08-23 18:08 評論0 收藏0