小程序中组件间的方法调用

1.组件之间的传参

小程序中组件间的方法调用_第1张图片

组件的传参

在工作中,我遇到了需要父组件调用子组件的子组件的事件。
其中,有2中方法解决

1.事件总线

eventBus.js

class EventBus {
    constructor() {
      // 初始化事件列表
      this.eventObject = {};
    }
    // 发布事件
    publish(eventName) {
      // 取出当前事件所有的回调函数
      const callbackList = this.eventObject[eventName];
  
      if (!callbackList) return console.warn(eventName + " not found!");
  
      // 执行每一个回调函数
      for (let callback of callbackList) {
        callback();
      }
    }
    // 订阅事件
    subscribe(eventName, callback) {
      // 初始化这个事件
      if (!this.eventObject[eventName]) {
        this.eventObject[eventName] = [];
      }
  
      // 存储订阅者的回调函数
      this.eventObject[eventName].push(callback);

    }
  }
module.exports = {
    EventBus:EventBus
};



app.js

import {
    EventBus
} from './utils/eventBus.js';
const eventBus = new EventBus();

父组件

getList(){
   		 let str = "#widget"+this.data.generalListId
         app.eventBus.publish(str);
         }

孙组件

    /**
     * 回调分页加载
     */
     getListCallBack(){
         let str  = "widget"+this.data.generalListId
         app.eventBus.subscribe(str, () => {
             this.fun()
          });
    },

使用事件总线的时候,需要先订阅,然后再发布。
也就是说需要先在生命周期中使用getListCallBack(),然后再触发父组件的getList()
还有就是,全局一个对象,在app.js中注册成为全局对象

2.this.selectComponent()

使用这个方法的时候,一定要注意选择器的值是什么。切记切记

分别在父组件,子组件中调用
子组件

		getList(){
        this.selectComponent("#generalList").getList()
    }

父组件

 getList(){
        let str = "#widget"+this.data.generalListId
        this.selectComponent(str).getList()
    },

小程序中组件间的方法调用_第2张图片

你可能感兴趣的:(小程序,javascript,前端)