微信小程序封裝組件,子父組件通信 詳細解析


第一步:在根目錄創建component文件夾

第二步:在component文件夾中創建子組件文件夾,右鍵文件夾點擊 “新建Component” ,輸入組件名稱  (也可以直接在component文件夾中直接右鍵新建Component)

 這是我創建 uploadfile 文件夾 封裝的上傳文件組件

 

第三步:詳細介紹子組件各種信息

 1.WXML介紹,里面的內容和其他並無太大差別。(里面是引入了vant的組件,不要介意) ,WXSS(一樣  不介紹)

  

 2.JSON介紹   

    "component": true,   代表這個是子組件  
    usingComponents:{} ,和其他頁面作用一樣

    

 3.JS介紹 很重要

  介紹 properties   這里面是子組件接收父組件傳過來的值

 

   

 data :   組件的初始數據

   

  methods:   組件的方法列表(放一些組件里面需要執行的方法)
 
  
第四步:子父組件通信   
 
  1.父組件在.JSON文件中的"usingComponents" 引入子組件  (父組件JSON頁面)
 
  
   2.WXML頁面展示 和  "父組件向子組件傳值"  "子組件調用父組件方法並傳值" (父組件WXML頁面)
 
     畫紅色橫線的就是父組件向子組件傳的參數 ,怎么看子組件接收參數,可以看第三步子組件介紹的 "properties"。  
      畫黃色橫線的就是子組件調用父組件方法“changeimg_special”,(bind:  必須加上)
 
   
    3.this.triggerEvent(' ',{},{}),第一個參數是自定義事件名稱,這個名稱是在頁面調用組件時bind的名稱,第二個對象就可以將想要的屬性拿到,第三個參數文檔中有介紹,有機會再做補充。
 
 
  
 
做的不太好,請見諒!!
 


免責聲明!

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



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