vue通訊傳值的多種方式

一、通過路由帶引數進行傳值

①兩個元件 a和b,a元件通過query把orderid傳遞給b元件（觸發事件可以是點選事件、鉤子函式等）

this.$router.push( }) // 跳轉到b

②在b元件中獲取a元件傳遞過來的引數

this.$route.query.orderid

二、通過設定 session storage快取的形式進行傳遞

①兩個元件a和b，在a元件中設定快取orderdata

const orderdata =

sessionstorage.setitem('快取名稱', json.stringify(orderdata))

②b元件就可以獲取在a中設定的快取了

const datab = json.parse(sessionstorage.getitem('快取名稱'))

此時 datab 就是資料 orderdata

三、父子元件之間的傳值

（一）父元件往子元件傳值props

①定義父元件，父元件傳遞 number這個數值給子元件，如果傳遞的引數很多，推薦使用json陣列{}的形式

②定義子元件，子元件通過 props方法獲取父元件傳遞過來的值。props中可以定義能接收的資料型別，如果不符合會報錯。

當然也可以簡單一點，如果不考慮資料型別，直接 props:["number","string"]就可以了,中括號包裹，多個值使用，分隔。

③假如接收的引數是動態的，比如 input輸入的內容 v-model的形式

注意：傳遞的引數名稱支援駝峰命名，下圖描述不正確（1.0是不支援的）

④父子元件傳值，資料是非同步請求，有可能資料渲染時報錯

原因：非同步請求時，資料還沒有獲取到但是此時已經渲染節點了

解決方案：可以在父元件需要傳遞資料的節點加上 v-if = false，非同步請求獲取資料後，v-if = true

（二）、子元件往父元件傳值，通過emit事件

四、不同元件之間傳值，通過eventbus（小專案少頁面用eventbus，大專案多頁面使用 vuex）

①定義乙個新的vue例項專門用於傳遞資料，並匯出

②定義傳遞的方法名和傳輸內容，點選事件或鉤子函式觸發eventbus.emit事件

③接收傳遞過來的資料

注意：enentbus是乙個另乙個新的vue例項，區分兩個this所代表得vue例項

五、vuex進行傳值

為什麼使用vuex?

vuex主要是是做資料互動，父子元件傳值可以很容易辦到，但是兄弟元件間傳值（兄弟元件下又有父子元件），或者大型spa單頁面框架專案，頁面多並且一層巢狀一層的傳值，異常麻煩，用vuex來維護共有的狀態或資料會顯得得心應手。

需求：兩個元件a和b，vuex維護的公共資料是餐館的名稱 resturantname,預設餐館名稱是飛歌餐館，那麼現在a和b頁面顯示的就是飛歌餐館。如果a修改餐館名稱為 a餐館，則b頁面顯示的將會是 a餐館，反之b修改同理。這就是vuex維護公共狀態或資料的魅力，在乙個地方修改了資料，在這個專案的其他頁面都會變成這個資料。

①使用 vue-cli腳手架工具建立乙個工程專案，工程目錄，建立元件a和元件b路由如下：

路由如下：

②開始使用vuex，新建乙個 sotre資料夾，分開維護 actions mutations getters

②在store/index.js檔案中新建vuex 的store例項

*as的意思是匯入這個檔案裡面的所有內容，就不用乙個個例項來匯入了。

import vue from 'vue'

import vuex from 'vuex'

import * as getters from './getters' // 匯入響應的模組，*相當於引入了這個元件下所有匯出的事例

import * as actions from './actions'

import * as mutations from './mutations'

vue.use(vuex)

// 首先宣告乙個需要全域性維護的狀態 state,比如我這裡舉例的resturantname

const state =

// 註冊上面引入的各大模組

const store = new vuex.store()

export default store // 匯出store並在 main.js中引用註冊。

③actions

// 給action註冊事件處理函式。當這個函式被觸發時候，將狀態提交到mutations中處理

export function modifyaname(, name)

export function modifybname(, name)

// es6精簡寫法

// export const modifyaname = (,name) => commit('modifyaname', name)

④mutations

// 提交 mutations是更改vuex狀態的唯一合法方法

export const modifyaname = (state, name) =>

export const modifybname = (state, name) =>

⑤getters

④在元件a中，定義點選事件，點選修改餐館的名稱，並把餐館的名稱在事件中用引數進行傳遞。

...mapactions 和 ...mapgetters都是vuex提供的語法糖，在底層已經封裝好了，拿來就能用，簡化了很多操作。

其中...mapactions(['clickafn']) 相當於this.$store.dispatch('clickafn'，)，mapactions中只需要指定方法名即可，引數省略。

...mapgetters(['resturantname'])相當於this.$store.getters.resturantname

元件a餐館名稱：}

修改為a餐館

跳轉到b頁面

b元件同理

元件b餐館名稱：}

修改為b餐館

跳轉到a頁面

vue通訊傳值的多種方式

Vue通訊傳值的多種方式

vue 通訊傳值的多種方式

Vue傳值方式

vue通訊 傳值的多種方式

Vue通訊 傳值的多種方式

vue 通訊 傳值的多種方式

Vue傳值方式

相關推薦

vue通訊傳值的多種方式

Vue通訊傳值的多種方式

vue 通訊傳值的多種方式