簡述vue中父子組件是怎樣相互傳遞值的（基礎向）

 

　　前言

　　首先，你須要知道vue中父組件和子組件分別指的是什麼？

　　　　  父組件：vue的根實例——用new Vue()構造函數建立的vue實例（實例會有一個掛載點，掛載點裏的全部內容可理解爲父組件的內容）

　　　     

　　　　　   這裏以root爲掛載點，root裏包含的全部內容可稱爲模板，即咱們常說的父組件

　　　　　  

　　　　    子組件：用Vue.component()註冊的組件（下圖todo-item就是組件的名稱，該名稱可自定義，推薦使用短橫線分隔命名）

　　　    

　　　　    定義組件名的2種方式（截圖截自vue官網）

　　　　     

　　　　    注：建議在html中引用組件時（非字符串模板），組件命名都用短橫線命名且字母全小寫的方式

 

 

　　父組件向子組件傳遞值

　　　　 父組件：經過屬性的形式進行傳遞（好比v-bind:content="item" ，經過v-bind屬性把item的值動態賦給content變量）

　　　　  

　　　　 子組件：經過props接收父組件傳遞的值 

 　　　　　 

 

 

　　子組件向父組件傳遞值

　　　　子組件：經過$emit()方法發佈事件廣播

　　　　  父組件：捕獲到子組件向外觸發的事件，而後可執行相應的方法

　　　　  下圖爲子組件經過$emit()方法向外傳遞delete事件，父組件捕獲到delete事件後執行handleDelete()方法

　　　　  下圖中methods方法裏的this默認指向vue實例

　　　　  不要把methods方法寫成箭頭函數，由於箭頭函數會改變this的指向，使this不在默認指向vue實例，而指向undefined

　　　　  同時vue實例中的data，computed，watch屬性也都不要寫成箭頭函數，理由同上

　　　　 

　　　　　注：@delete="handleDelete"爲v-on:click="handleDelete"的簡寫；

　　　　　　 :content="item"爲v-bind:content="item"的簡寫

　　　　

 

 

　　補充：怎麼註冊全局組件和局部組件

　　　　  ①：註冊全局組件（用Vue.component()，組件名爲todo-item，可自定義，推薦使用短橫線分隔命名）

　　　　   

　　　　　    ②：註冊局部組件（經過一個 JavaScript 對象來定義組件）

　　　　　   

　　　　　   註冊局部組件後，直接引用組件<todo-item></todo-item>會報錯，提示未註冊該組件

　　　　 

　　　　　   解決方法是在vue實例中用components進行聲明

　　　　　   

 　　　　　  注：對於components對象中的每一個屬性來講，其屬性名就是自定義元素的名字，其屬性值就是這個組件的選項對象