Vue基礎之自定義組件


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 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM