小程序里面组件和页面之间的相互调用_小程序组件调用页面方法-CSDN博客

本文链接：https://blog.csdn.net/baidu_35290582/article/details/120758075

本文详细介绍了在小程序中，通过组件调用页面方法和页面调用组件方法的两种方式，包括步骤和代码示例，帮助理解组件间通信的实践应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一种：通过组件去调用页面里面的方法

执行过程：已mine.wxml页面和minelogot.wxml页面为例

1、在mine.json中引入该组件：

{
  "usingComponents": {
    "minelogot":"/components/minelogot/minelogot"
  },
  "navigationBarTitleText": "我的"
}

2、在mine.wxml中使用minelogot组件:

<view>
 <minelogot id="minelogot" logot="{{flaglogot}}" bind:canclemine="canclemine"></minelogot>
</view>

3、在minelogot.js里面接收传递过来的参数，定义方法

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    logot:{
      type:Boolean,
      value:false
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    evaluCancle() {
      this.triggerEvent('canclemine',{logot: false})
    },
    goOut(){
      wx.reLaunch({
        url: '../login/login',
      })
    },
  }
})

4、在组件minelogot.wxml中定一个方法evaluCancle：

<view class="popEvalu" wx:if="{{logot}}">
    <view class="popEvaluContent">
      <view class="evaluBtn">
         <view class="evaluMain">
           <!-- <view class="evalurow">拍照</view> -->
           <view class="evalurow"  bindtap="goOut">退出登录</view>
         </view>
         <view class="evaluBtn-btn bb2" bindtap="evaluCancle">取消</view>
      </view>
    </view>
  </view>

5、触发方法以后通过this.triggerEvent()向mine页面传递方法

6、mine页面接收参数，触发方法：

 canclemine(e){
    console.log(e.detail.logot)
  },

第二种:通过页面调用组件里面的方法

通过mine页面，调用minelogot组件：
1.在mine页面中使用minelogot组件，给他起一个ID
2.在mine.js中，获取到这个组件（实例化）
3.通过实例化的对象，即可调用组件中的方法

mine.js逻辑

 onReady: function(options) {
    this.minelogot = this.selectComponent("#minelogot"); //这里是实例化了minelogot,通过minelogot，我们就能调用minelogot组建中的方法
  },
  useComponentFn(){
    this.minelogot.componentFn();//调用了组建中的componentFn方法  
  }