小程序-子组件调用父组件的方法

准备工作 ----- 封装组件

image.png

子组件

a-tt.wxml

 <view bindtap="parentComponentFunction">
    <button>子调用父的方法</button>
</view>

a-tt.json

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

a-tt.js

// components/test.js
Component({
  /* 组件的属性列表 */
  properties: {
   
  },
  /* 组件的初始数据 */
  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
//获取应用实例
const app = getApp()

Page({
  data: {
    
  },
  parentComponentFunction: function(){
    console.log("成功调用父组件的方法");
    // 可以写方法
    // wx.navigateTo({
    //   url : ' '
    // })
  }
})

控制台显示

image.png