準(zhǔn)備工作 ----- 封裝組件

image.png

子組件

a-tt.wxml

 <view bindtap="parentComponentFunction">
    <button>子調(diào)用父的方法</button>
</view>

a-tt.json

{
  "component": true,
  "usingComponents": {}
}

a-tt.js

// components/test.js
Component({
  /* 組件的屬性列表 */
  properties: {
   
  },
  /* 組件的初始數(shù)據(jù) */
  data: {

  },
  /* 組件的方法列表 */
  methods: {
    parentComponentFunction: function(){
      this.triggerEvent('parentComponentFunction');
  //   console.log("獲取父級方法")
    }
  }
})

父組件

index.wxml

 <view>
   <a-tt bind:parentComponentFunction="parentComponentFunction" />
 </view>

index.json

{
  "usingComponents":{
    "a-tt":"/components/a-tt/a-tt"
  }
}

js

//index.js
//獲取應(yīng)用實(shí)例
const app = getApp()

Page({
  data: {
    
  },
  parentComponentFunction: function(){
    console.log("成功調(diào)用父組件的方法");
    // 可以寫方法
    // wx.navigateTo({
    //   url : ' '
    // })
  }
})

控制臺顯示

image.png