1.x [uniapp] uview 二次封装u( 三 ) _组件

uni-app坑：Props传递，该方法里的this指向子组件而不是父组件
对于page父组件而言, 我们封装的同样会面临abc函数体中,this指向子组件()的问题
所以,我们来一各个测试看看this的指向
2.1
that.$props.()的写法
打印结果
结果显示: this的指向既不指向page父组件, 也不指向子组件… pass
2.2
直接的 that.()的写法
打印结果
结果显示: 调用是成功, 但是 this的指向出现了问题, page父组件的abc函数体中,this指向了子组件
2.3 bind方案
针对2.2的改进, 用 bind的方案来解决this的指向问题
打印结果
结果符合预期, this的指向也正确了
方案3: 改用$emit事件机制
当然, paga父组件里也要做一下改造,
打印结果
结果也非常符合预期, this的指向也是正确的指向了父组件~~
总结
一圈搞下来, 我们有了两种解决办法
方案2.3 和方案3
至此,对于uview(1.x)的组件 u-的二次封装中遇到的自定义事件的处理, 也算完成.
至于选择上面哪两种方案?
我从封装的角度出发, 我会采用方案2.3
毕竟, 二次封装也是为了后续使用方便, 还是延用 u-的自定义风格,比较合适点~
能看到这的, 都是不嫌弃我文笔凌乱的, 总之~ 谢谢观看, 如果有帮助或启发, 那就是本篇的荣幸~
再次记录
以上两个方法, 都是基于在 vue组件的生命周期里, 让全局变量that = this
这里面存在一个重大的问题
that永远是只能赋值一次, 且会被下个组件的创建加载过程, 触发 that指向的覆盖…
这就造成了bug
如: A->B->C
A默认返回 that= A.this
B默认返回 that= B.this
C自定义返回 that=C.this
一圈路由跳转下拉, that最终指向了 C ,
当C返回到B的时候, B的的that 依然是C的this…
就算及时清理that, 也会存在that 无法在B的时候重新被 that= B.this
(其实也不是没有, 可以利用B的来重新挂载, 但是这样就显得非常麻烦…)
所以… 放弃拦截方案了,
直接把自定义事件透传给 u- 组件, 等后续我有解决办法了再行尝试