小程序自定义组件的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()方法的对象或者有无修改原型链上的内容（其实我也不知道）

小程序自定义组件的methods的调用相关推荐

app vue 真机运行_uni-app黑魔法：小程序自定义组件运行到H5平台
引言移动互联网的初期,囿于设备硬件性能限制,流量以原生App为主,iOS.Android是当时两大平台. 随着硬件及OS的更新换代,H5可承载的体验逐步完善,为提高开发效率.节约资源(复用代码)以及 ...
微信小程序自定义组件，提示组件
微信小程序自定义组件,这里列举了一个常用的提示自定义组件,调用自定义组件中的方法和字段.仅供参考和学习. 编写组件: 在根目录下添加"components"目录,然后像添加Page ...
微信小程序组件和slot_微信小程序自定义组件详解
自定义组件能够帮我们更好的复用代码和重构简化代码复杂度.一起来学习一下小程序自定义组件的内容吧. 从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程.所有自定义组件相关特性都需要基础库版 ...
微信小程序自定义组件的基本使用
微信小程序自定义组件的基本使用组件与模块类似,实现了功能的复用,提高开发速率,减少代码量在开发过程中 , 总会遇到一些功能板块是相同或很类似的 .如两个不同页面都有搜索框 , 或者导航栏等 . ...
小程序组件onload_微信小程序自定义组件(一)
好吧,突然发现学不完了,一下子,那就分开吧,由于时间太久,直接重新大致复习了一下微信小程序自定义组件微信小程序支持自定义组件下方的目录其中,components为组件目录,nodemodule ...
一步步教你实现微信小程序自定义组件
一步步教你实现微信小程序自定义组件更新时间:2022年03月21日 11:12:34 作者:naluduo233 之前做小程序开发的时候,对于开发来说比较头疼的莫过于自定义组件了,下面这篇文章主 ...
小程序自定义组件以及组件传值的简单总结
小程序自定义组件以及组件传值的简单总结 1.自定义组件 2.使用自定义组件 3.组件传值--->父传子 4.组件传值--->子传父 1.自定义组件在根目录下创建components文件夹 ...
php自定义控件,小程序自定义组件的实现方法（代码）
本篇文章给大家带来的内容是关于小程序自定义组件的实现方法(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. File:threecolgrid.js// components/t ...
微信小程序自定义组件方案
前言:小程序已于11月初开放了小程序组件功能,但事件方面还不是很完善,有的组件暂时可能还是要用其他方式来实现,这里简单记录下开发小程序自定义组件的要点. 在小程序官方开发组件开发功能之前,自定义组件的 ...

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

自定义组件的methods的调用

小程序自定义组件的methods的调用相关推荐

最新文章

热门文章