小程序模板網(wǎng)

微信小程序的組件通信

發(fā)布時間:2021-06-25 10:54 所屬欄目:小程序開發(fā)教程

1.父傳子

  實(shí)現(xiàn)方式類似于vue
  引入子組件
  在子組件上添加自定義屬性 例如:title,content
  在子組件上的properties上添加要接收的屬性 title,content
  在子組件上通過{{ }}就可以直接使用啦。。
  ps:只是接收的時候vue是用props  小程序是properties  里邊的方法都是一樣的

2.子傳父

  實(shí)現(xiàn)方式類似于vue
  1.在子組件上觸發(fā)一個事件 例如:catchtap="confirmmFn"
  2.在對應(yīng)的confirmFn上添加派發(fā)的事件和要向父級傳遞的數(shù)據(jù)
    this.triggerEvent('confirm','ok')
    this.triggerEvent('cancel','no')
  3.父組件監(jiān)聽子組件派發(fā)過來的事件和要接收的數(shù)據(jù)
    bind要監(jiān)聽的事件名=“回調(diào)方法”
     eg:
       <child  
        bindconfirm="confirm"
        bindcancel="cancel"
       />

   4.在父組件的js中接收數(shù)據(jù)
    //監(jiān)聽確定按鈕觸發(fā)的回調(diào)
    confirm(e) {
       console.log('監(jiān)聽確定',e.detail)
     },

3.兄弟相傳 類似于react的兄弟相傳

  A兄弟,B兄弟,C(父組件)三個組件
  A-->C--->B
  組件A 通過子傳父 將數(shù)據(jù)傳給父組件 C 
  父組件C 通過父傳子的方法將數(shù)據(jù)再傳給子組件B 這樣就完成了微信小程序的兄弟組件通信
 


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/26739.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢