1. 程式人生 > >4-2 父子組件的數據傳遞

4-2 父子組件的數據傳遞

講解 參數 形式 直接 com 接下來 -s mage 16px

在Vue中,父組件向子組件傳值都是靠屬性的形式決定的

編寫如下代碼:    這次用局部的形式來編寫組件

技術分享圖片

//在控制臺上顯示效果如下:

技術分享圖片

//如上,可以發現——盡管頁面上的數據點擊後有發生改變,可是卻報了錯誤!!!

//原因在於,我們這樣的寫法直接修改了從父組件傳遞過來的數據  即單向數據流的概念:父組件可以向子組件傳遞參數(通過屬性的形式傳遞),傳遞的參數可以在父組件中隨意的更改;但是,子組件卻不能反過來直接去修改父組件傳遞過來的參數,只能去用這個傳遞過來的內容

//修改上面的代碼後,新代碼如下:    可以完整的實現數據點擊後值變化的效果  即定義一個data,把父組件傳遞過來的參數放到data中,然後再用data中的數據去引用

技術分享圖片

接下來,講解一下子組件向父組件傳遞參數的另外一種寫法:(上一章也有提及到的計數器方法)

//代碼如下:

技術分享圖片

4-2 父子組件的數據傳遞