wepy开发踩坑记录

与vue的不同

methods对象只存放tap等事件触发时的方法

events对象只存放$emit及$broadcast方法触发的事件

自定义方法及属性放在与methods平级的位置

props是动态时,不会更新数据

加上.sync的修饰符就可以解决(:prop.snyc='item')

同名组件共享同一实例及数据

循环渲染组件时,容易出现组件数据相互污染。可以用最外层的组件监听事件冒泡以修改数据,同时触发事件的组件用setTimeout包裹,保证执行顺序。

props传值

有些情况明明值已经传进去了,但是直接获取 this.propName 时却取不到数据,而从事件传值时却可以获取到数据,如

cancel: (sn) => {
  console.log(this.orderSn, sn)
}

该代码中 sn 由 this.orderSn 传值,但是 this.orderSn 为 undefined, sn 则为 "1711291235045825"

大部分情况直接由事件传值比较靠谱。

组件没有 onLoad 等页面事件

页面中设置好 this.$broadcast('someEvent', option);

组件监听事件则可以解决