vue 元件之間傳值

2022-05-04 17:33:10 字數 2659 閱讀 3599

需求1:假設要把父元件的zhuli傳值到這是使用者的詳細資訊(紅色區域),該如何操作?

(已知)標籤上可以寫自定義屬性,在使用標籤的時候,告訴子元件使用哪些標籤,子元件中用props定義可以使用的屬性,可以傳多個屬性。

在父元件使用的子元件標籤中繫結自定義屬性:

name

在子元件中使用props(可以是陣列也可以是物件)接受即可。

export default

注意的點:

自定義的屬性最好使用中劃線寫法,my-name,在正常的vue例項中(沒有使用vue-cli)中不支援駝峰式寫法myname,因為vue-cli中是有vue-template-compiler外掛程式支援,正常的vue例項中沒有,會報錯。

需求2:改變傳過來的值

直接使用函式修改的話,可以修改成功,但會報錯,容易造成資料流混亂。我們應該使用data欄位,先把傳過來的值賦值給乙個變數,再更改那個變數。

export default 

},methods: ,

}}

props驗證

可以把props寫成乙個物件。沒有通過則提前報錯。

自定義屬性後面可以直接寫型別(基礎驗證),如允許多種型別,可以寫成陣列;也可以寫成物件(複雜驗證,沒有傳值的時候可以使用預設值)。

props: ,

age:[number, string, array]

},

注意點: 如果型別是object,default要寫成函式

props: }},

age:[number, string, array]

},

需求: 點選子元件(紅色區域)的button按鈕,可以改變父元件的值。

this.$emit('')可以觸發乙個自定義的事件

第一種方法:(推薦)

第一步: 在子元件中繫結乙個函式

"

changeparentname

">改變父級的name

第二步: 在子元件中定義函式,再函式中自定義乙個事件

export default 

}}

第三步: 繫結在父元件中

changename

第四步: 在父元件中寫乙個事件函式

export default 

},components: ,

methods: ,

}}

第二種方法:

第一步: 先在父元件中寫乙個callback函式

export default 

},components: ,

methods:

}}

第二步: 把callback函式傳過去

callback

第三步: 在子元件中接收callback函式

props: ,

第四步: 點選父級button按鈕的時候,執行callback函式

"

callback('小紅')

">改變父級的name

成功。推薦使用第一種

第一種方法:

第一步: 在父元件中給要傳值的兄弟兩個都繫結要傳的變數。

ageage

" @editage="

changeage

第二步: 在要傳值得元件中接受變數和繫結觸發事件

編輯使用者

年齡: }

"changeage

">編輯年齡

第三步: 在父元件中繫結要傳元件中的自定義事件

export default 

},components: ,

methods: ,

}}

總結: 當要傳值的元件改變了父元件的變數,父元件又可以把改變的值傳值所繫結變數的元件,實現兄弟間傳值。

第二種方式: 和上面子元件傳值父元件一樣,使用乙個函式,再函式中傳參使用。

小結: 這兩種方式的缺點是巢狀層級深,不好處理。

第三種方式: 後續應該使用vuex

第四種方式: 思想: 既然要借助父級,那麼可不可不定義乙個全域性事件

第一步: 在入口檔案main.js裡暴露乙個vue例項

export const eventbus = new vue() // 暴露乙個vue例項

第二步: 在要傳值的檔案裡匯入vue例項模組,age使用自己的變數,再定義乙個全域性觸發事件函式,觸發事件函式繫結在乙個button上

編輯使用者

年齡: }

"changeage

">編輯年齡

第三步: 在要被傳入值得元件中也匯入vue例項模組,也不使用父元件中傳過來個age,自己重新定義,建立乙個初始化的鉤子函式,再使用created鉤子函式中使用傳值元件的全域性定義事件。

import  from

"../main.js

"export default

},methods: ,

created() )

}}

總結: 現在兄弟之間傳值,都沒有通過父元件

Vue 元件之間傳值

一 父元件向子元件傳遞資料 在 vue 中,可以使用 props 向子元件傳遞資料。子元件部分 這是 header.vue 的 html 部分,logo 是在 data 中定義的變數。如果需要從父元件獲取 logo 的值,就需要使用props logo 在 props 中新增了元素之後,就不需要在 ...

Vue元件之間傳值

父元件向子元件傳值 子元件向父元件傳值 1 子元件用 emit 觸發事件 第乙個引數為 自定義的事件名稱 第二個引數為需要傳遞的資料 擴大父元件中字型大小 擴大父元件中字型大小 兄弟之間的傳遞 傳遞資料方,通過乙個事件觸發hub.emit 方法名,傳遞的資料 接收資料方,通過mounted 鉤子中 ...

vue變數傳值 Vue 元件之間傳值

一 父元件向子元件傳遞資料 在 vue 中,可以使用 props 向子元件傳遞資料。子元件部分 這是 header.vue 的 html 部分,logo 是在 data 中定義的變數。如果需要從父元件獲取 logo 的值,就需要使用 props logo 在 props 中新增了元素之後,就不需要在...