使用Vue.js進行數據綁定以及父子組件傳值

最近準備快速複習一下Vue，作幾個小DEMO來複習一下

寫個todolist

使用v-model進行數據的雙向綁定，當input裏面的內容發生變化,vue實例裏的inputValue也發生變化，同理當input.value發生變化時input的也會變化

 

 給按鈕綁定的點擊事件添加上把input的內容添加到列表數組中，基本的todolist就完成了

 

 

接下來把列表項組件化，使用Vue.component新建一個全局組件，使用組件循環列表

接下父組件經過content變量向子組件傳遞內容,同時組件內部使用props去接收這個變量

 

使用vue.component定義的是一個全局組件，接下來把這個全局組件改寫成局部組件

接下來若是子組件須要向父組件傳值,即點擊每一項item須要在父組件接收到每一項的值和索引，經過獲取到的索引把對應點擊的哪一項刪除

 首先給子組件的模板中綁定一個點擊事件

 

和微信小程序類似， 刪除子組件的時候須要把對應的內容傳遞到父組件，在小程序中使用triggerEvent,而在vue中使用$emit

改一下代碼在vue中v-on可使用@代替，v-bind可使用:代替，最終代碼以下: