vue元件之間的多種通訊方法

2021-08-14 18:40:26 字數 3082 閱讀 7796

vue是一種mvvm框架,它相對於jquery可能比較大的差異點之一就在於元件之間的通訊了。這裡提供三種不同情況下vue元件的通訊方式。

一. vue父子元件通訊

vue父子元件通訊可以用vue.$emit自定義事件來解決。

// 父元件

"editaddress">single-address>

// 子元件

methods:

}

當然也可以使用props方式解決。

// 父元件

"addressitems">

// 子元件

}}export

default

}

二. 非父子元件通訊

非父子元件通訊同樣也可以用vue.$emit自定義事件來解決

var bus = new vue()

// 元件a

bus.$emit('id-selected', 1)

// 元件b

bus.$on('id-selected', function

(id)

)

三. vue跨元件跨模組通訊

雖然父子元件,非父子元件間的通訊vue都可以有辦法解決,但是如果專案結構複雜化以後,這樣的自定義事件變多以後**難以管理,所以還是建議使用vuex。

接下來就講一講vuex這個東西吧。vuex,官方的說法就是vuex 是乙個專為 vue.js 應用程式開發的狀態管理模式。如果之前沒有接觸過應用狀態管理這一塊的內容的話,可能光看文件是很難看明白的。按個人的理解來說,vuex最大的作用就是把部分父子元件之間頻繁的通訊過程簡單化,所以,對於一些父子元件通訊並不頻繁的情況來說,並不應該使用vuex,當然這也意味著,如果你對父子元件之間的通訊還不是很明確的話,可以先學習一下這一塊的知識。

vuex有四個核心概念,其中state和getters主要是用於資料的儲存與輸出,而mutations和actions是用於提交事件並修改state中的資料。

也是以購物車的業務來舉例,首先由於vue的限制,頁面中所有的資料都需要乙個初始化,這樣才能在之後業務邏輯中響應式地修改資料(修改資料的同時變化頁面內容)。這裡我們可以在vue元件中使用ajax獲取資料,獲取到的資料直接賦給state中的資料:

// global.domain.centerurl是我自己定義的全域性變數,這種就可以更方便的管理前端資料請求介面的位址了

getdatafrombackend () ).then(function (response) )

}

getters的用法與計算屬性基本一致,computed會用的話那這個也基本就會用了。

接下來就是重頭戲mutations了。mutations原意是突變,這裡可以理解為立即修改吧。也就是說,mutations可以修改state中的資料,但是有乙個限制,那就是只能同步修改,而不能非同步,你想要按個定時器過2秒鐘修改state,那對不起了您哪,不行。但是,想要非同步修改state,也不是不行,光靠mutations乙個人是不行的了,還得要靠actions,而且actions還不能直接操作state,他需要非同步提交給mutations,然後再由mutations同步修改state資料。聽上去挺麻煩的一件事情啊,還是直接看**吧。

mutations: ,

modifyifcollect (state) ,

// 收藏成功事件

collectsuccess (state) ,

// 取消收藏事件

collectcancel (state)

},actions: ) , 2000)

} else , 2000)}}

}

// 假如有資料需要從元件傳到actions中時,需要兩個大括號,第乙個大括號放commit或者state這類vuex引數,而第二個大括號放傳進來的引數

// 這裡使用vuex actions呼叫了兩個mutations的方法實現乙個功能,是因為第二個函式中有乙個引數是需要第乙個函式提供的

changepos (, )

總的來說,在我看懂了vuex以後,我總是覺得有乙個vuex來分擔一下data的功能那是再好不過了,這樣不光能夠更好地管理我的應用,同時也能夠提高我.vue單檔案的可讀性。

那麼這裡就有乙個問題了,我們都知道乙個稍微大一點的專案,那資料量都是很多的,如果整個專案裡的資料都寫在乙個vuex檔案裡的話就顯得整個檔案太大太重了,這與我們想要提高檔案的可讀性是相悖的。所以我們需要有乙個分模組的意識來管理vuex,管理應用的狀態。

而vuex也正好提供了這個功能(vuex還真的是夠強大),在具體使用的過程中,我會先把那些需要與其他元件互動的元件中的資料都提取出來放到vuex裡面管理,而那些完全沒有互動的資料還是放在元件的data中,例如標識該元件的標題資料等等。然後,這裡我們就可以用到vuex的模組管理功能,愉快地把資料按照元件之間的功能聯絡來分離,並把它們拆分到乙個個小檔案中啦。

// 這是vuex總的管理檔案,將各模組統一在一起,從而將每乙個分支都連線到vuex這個總的狀態樹上

// 引入vue

import vue from

'vue'

// 引入vuex

import vuex from

'vuex'

// 引入應用狀態管理

import goodshandlestore from

'./goodshandle'

import orderstore from

'./order'

import addressstore from

'./address'

import shopcarstore from

'./shopcar'

import merchantstore from

'./merchant'

import couponstore from

'./coupon'

vue.use(vuex)

export

default

new vuex.store(

})

vue元件之間的多種通訊方法

vue是一種mvvm框架,它相對於jquery可能比較大的差異點之一就在於元件之間的通訊了。這裡提供三種不同情況下vue元件的通訊方式。一.vue父子元件通訊 vue父子元件通訊可以用vue.emit自定義事件來解決。父元件 address edit address editaddress addr...

Vue 父子元件之間的多種通訊方法,簡單易用

父元件傳值到子元件 方法 一 父元件的資料直接繫結到子元件上面,在子元件就可以通過頁面的props直接用父元件的資料了 注意 這種方法是單向繫結,子元件不能改變父元件的值 父元件傳遞 子元件接收 props 方法 二 父元件和子元件之間通過v model實現資料的雙向繫結 注意 這種方法是雙向繫結,...

Vue 非父子元件之間的多種通訊方法,簡單易用

方法 一 通過vue提供的bus.js進行通訊,實現資料的傳遞和聯動 bus.js import vue from vue 定義空的vue例項,作為 eventbus實現非父子元件之間的通訊 vue2.x中去掉了broadcast let eventbus new vue export defaul...