需求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 中新增了元素之後,就不需要在...