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

文章目录解决办法方案3: 改用$emit事件机制总结再次记录
背景介绍
项目: 使用了uview框架 1.x版本
其中对于组件 u- , 想要进行二次简单封装,把一些固定样式/固定配置等预写好, 同时对默认的返回按钮做一层前置拦截,方便后续扩展.
实现的效果
封装的组件为:

这其中, 返回的点击事件我们要自定义的话, 可以通过:属性来传递, 如此处的 abc
而在组件内部:
name="left">name="right">
组件内部的 props之一
// 自定义返回逻辑customBack: {type: Function,default: null},
我们在组件内部其实就是直接摆放了一个 u-组件
而在处理对默认返回按钮的前置拦截的时候, 我们其实是给 u-的属性 :-back=""提供了一个组件内部实现的函数
这里再说一下, 是二次封装组件, 其参数有 , 外部会给他传递诸如 abc这种函数
u-nabar是uview的导航组件, 就是对它的二次封装, 它的自定义返回事件参数名 -back , 在本次封装中, 固定给他一个的处理方法(目的是用来做前置拦截等)
问题描述
问题就出在
这里说一句, app端(是ok的, iOS没验证,大概率也是ok的)
出问题的是小程序端
先来看报错
弯路:
第一眼看到, 又想到小程序, 第一个怀疑的是小程序的特性对的处理肯定不一样
【1.x[uniapp] uview 二次封装u】于是查到这一篇文章 :
为什么木有人啊？？【报Bug】自定义组件模式中子组件props接收不到数组中的
别的没仔细看, 就看了个这个
好吧, 那就用时间机制, 也就是发个 emit的方式
于是代码做修改
外部使用:
:
来看看什么下场…
点了多次返回按钮, 只打印, 没有后续了, 也没报错, 也没触发
于是去查了emit的处理, 有说不能用驼峰命名的, 有说该用 this.$.abc()的
好像两条路都走不通了
好吧, 继续耐着性子排查(期间各种尝试不表.)
总之最后, 看回到
点进去发现:
这时候才开始, 把目光放到了 this 这个罪魁祸首上面
其实上面不管用 this.$props.() or this.$emit(‘’), 最大的问题就是在 this上出了问题
因为平时主要做app端开发, 小程序接触不多, 对于这句话的理解不够深刻
uni-app坑：Props传递，该方法里的this指向子组件而不是父组件

文章插图
这句话怎么理解呢?
举个例子 - (这里写伪代码了)
父组件 - 中,我们设置一个state 叫做 :'i am '
子组件-sub 中,我们设置一个state 叫做 :'i am sub'
// 父组件//父组件方法logger(){console.log(this.parentTitle)console.log(this.subTitle)}//子组件实现
由于在小程序中, Props传递，该方法里的this指向子组件而不是父组件
所以, 其实在父组件的函数体中, this已经指向了子组件 -sub, 讲白了, 此时的this.就是子组件的this