1. 父組件向子組件傳值
??? 子組件在props中創建一個屬性,用以接收父組件傳過來的值
??? 父組件中注冊子組件
??? 在子組件標簽中添加子組件props中創建的屬性
??? 把需要傳給子組件的值賦給該屬性
2. 子組件向父組件傳值
子組件中需要以某種方式例如input事件的方法來觸發一個自定義事件
將需要傳的值作為$emit的第二個參數,該值將作為實參傳給響應自定義事件的方法
在父組件中注冊子組件并在子組件標簽上綁定對自定義事件的監聽
?
3. 父子組件相互傳值
例子效果:父組件和子組件中各有一個input標簽和一個p標簽,通過父組件或子組件中的input進行編輯,同步更改4個標簽的顯示內容。
4. vue的$emit(event,[...args])
觸發當前實例上的事件。附加參數都會傳給監聽器回調。
子組件通過$emit觸發父組件上綁定的自定義事件,將自身數據作為參數傳入事件函數,在父組件的事件函數中將參數賦值給父組件的對應變量。
示例,App.vue中v-on為組件綁定事件(自定義事件),子組件通過$emit觸發事件
總結:無論是子組件向父組件傳值還是父組件向子組件傳值,他們都有一個共同點就是有中間介質,子向父的介質是自定義事件,父向子的介質是props中的屬性。