关于微信小程序中组件和页面方法的互相调用

 

一、通过组件调用页面里面的方法：

我们这里用header组件和user页面来举例：

    1.先在header组件js页面的methods中，写一个方法，然后用triggerEvent给监听的事件起一个名字，这里叫做run
    2.在header.wxml中，使用bindtap绑定这个getUserFn方法，一般会绑定到按钮上
    3.在user.wxml中，调用header组件，并且bind:run="user组件中的方法名"

 

组件逻辑header.js

methods: {
    
    getUserFn(){
      const myEventDetail = {} // detail对象，提供给事件监听函数

      this.triggerEvent("run", myEventDetail)
      //第一个参数，就是给这个事件起个名字，要在组件的bind后面用，第二个参数是传入数据，还有第三个参数冒泡啥的
    }

组件页面header.wxml:

<button bindtap='getUserFn'>通过组件使用USERS里面的方法</button>

用户页面user.wxml：bind后面的run就是我们在triggerEvent中，给事件起的名字，后面的test，就是我们要调用的user.js中的方法

<header  bind:run="test"></header>

用户逻辑user.js：

test(){
    console.log("我是user.js中的test方法")
}

二、通过页面，调用组件中的方法：

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

用户页面user.wxml

<header id="header"><header> //在页面中调用组件，然后给他起个ID
<button bindtap="useComponentFn">通过页面调用组件中的方法</button>

用户逻辑user.js

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

组件逻辑header.js中的method中

componentFn(){
    console.log("我是header中的方法")
}