close

上次寫了如何使用父子方法互相使用,這次來說明,如何由父組件傳值 (Value)

假設情境如,如在父組件 table 中,checkbox 複選取多資料,傳入子組件,由子組件判斷其選擇的數量,子組件可顯示數選取的數量。

重點: props

Parents.vue

2017-10-31[17-38-(07)].jpg

 

Child.vue

2017-10-31[17-26-(20)].jpg

 

利用上方簡易的寫法,我們在父組件中,利用bind 的方式,將 parents_selected 的陣列,導入到 app-child 子組件中

而在子組件中,利用 props ,讓子組件知道父組件有傳來的資料,並宣告變量型態,此變量型態要正確,不然會報錯。

注意事項:

在規範中,父組件 bind 的部份要 child-selected 而在 子組件要寫成 childSelected ,特別要注意喔!

 

下一章再來寫,如何由子組件傳值(Value)給父組件

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 雲橙雨林 的頭像
    雲橙雨林

    雲橙雨林

    雲橙雨林 發表在 痞客邦 留言(0) 人氣()