1、父組件可以使用 props 把數據傳給子組件。
2、子組件可以使用 $emit 觸發父組件的自定義事件。
> 父頁面向子組件傳遞數據
> 子組件向父頁面傳遞數據 自定義事件
1. 父頁面向子組件傳遞數據 父-->子 關鍵字: props
1).首先vue中自定義組件語法 Vue.component('組件名',{組件配置對象})
2).組件通過定義props 屬性來與父頁面的數據溝通,props 可以是一個數組,也可以是一個對象 Vue作者之所以使用props 是因為它所定義的 數組 將在組件控件上 作為 屬性來呈現 props 是properties 的縮寫
3).組件呈現時,使用props 中定義的數組作為屬性名稱 從父頁面接收傳遞的數據 如上圖所示
4).組件模板中的字符串插值可以接收到props 從父頁面獲取到的值 進行使用
2. 子組件向父頁面傳遞數據 子--->父 關鍵字: $emit
1). 自定義事件和自定義屬性類似 都是通過在組件上進行綁定
2). 自定義屬性 在子組件中通過props 進行數據接收 自定義事件子組件中通過$emit 發送數據 $emit 第一個參數就是自定義事件的事件名
3).自定義事件的子組件中需要定義 普通事件 來調用 $emit 發送數據給父頁面
補充:
如上圖所示 如果你想在某個組件的根元素上監聽一個原生事件。可以使用 .native 修飾 v-on