小程序自定义组件的methods的调用

自定义组件的methods的调用

  • 今天写了一个日历组件,只显示当月的日历。在methods中用了一些方法来this.setData({}),但是不知道怎么让组件在实例化的时候自动调用方法。

  • 后来查到组件有一套生命周期

    • created 组件实例化,但节点树还未导入,因此这时不能用setData
    • attached 节点树完成,可以用setData渲染节点,但无法操作节点
    • ready(不是onReady) 组件布局完成,这时可以获取节点信息,也可以操作节点
    • moved 组件实例被移动到树的另一个位置
    • detached 组件实例从节点树中移除
  • 一般来说,想让某些设置初始值的方法在组件实例化的时候自动执行,那就在相应的生命周期函数中执行就可以了。当组件经历生命周期,就会自动执行里面的方法。

  • **问题来了:**初始化值的方法应该放在哪个生命周期函数当中呢?

    • 由于我使用的是计算得到值,再进行初始化赋值:this.setData({}),然后还要渲染到wxml页面上,所以这个方法涉及到了页面节点。也就是说要在页面的节点树导入后才能执行方法。

    • 所以参照生命周期函数的解释说明,将数据渲染到到页面节点上的方法,应该在attached中执行。

    • 找到了执行时间点,那就调用,如何调用呢?

      • 方式一:this.methods.xxx() 报错

        • 先在attached()看一下this此时是什么?看下里面有没有此js文件的methods,结果一看,this当中并没有methods。然后再看this的原型**_proto_**,发现methods中的方法都被定义在这。
        • 也就是说,使用this.methods.xxx() 的方式,会报错,找不到该方法
      • 方式二:this._proto_.xxx() 报错

        • 既然我们看到methods中定义的方法都被放在了原型当中,那么使用它原型里面的方法行不行呢?
          • 结果一:会提示:treeManager找不到,出现这样的情况,是因为在xxx()方法中使用了this.setData({}),由于this的指向和原型链的关系,会导致xxx()方法中的this不是指向本实例,所以会报错。
            在这里插入图片描述

          • 结果二:正常运行:因为xxx()中没有涉及到修改原型链上的数据,所以可以正常运行。

      • 方式三:this.xxx() 正确

        • // 生命周期
            lifetimes: {
              attached() {
                this.xxx();
              }
            },
          
        • 我们在attched()中没有找到我们定义的方法,那么这样的方式是怎样可以执行到我们的方法的呢?

          • 这就是原型链,this是本实例,当前实例找不到的方法,可以向父级中寻找,直到Object.prototype = null,也就是原型链的最顶层
          • 那么this.xxx()和this._proto_.xxx()有什么区别呢?
            • 应该是使用xxx()方法的对象或者有无修改原型链上的内容(其实我也不知道)

你可能感兴趣的:(微信小程序,自定义组件)