【uview】u-upload组件钩子函数before-upload，this指向false问题

目录

框架背景：uview1.0框架

问题：钩子函数this指向被重写无法获取自身方法与data，H5正常，小程序不正常

涉及组件：u-upload的before-upload，u-tabbar的before-switch

原因：

u-upload组件before-upload代码

$u.$parent代码

解决方法：

方法一：页面去掉定义name；

方法二：重写$parent方法,增加一个判断

---

框架背景：uview1.0框架

问题：钩子函数this指向被重写无法获取自身方法与data，H5正常，小程序不正常

涉及组件：u-upload的before-upload，u-tabbar的before-switch

原因：

我们朔源组件源码，在u-upload组件源码第387行可以发现重新绑定了this，进一步看$parent方法的操作

u-upload组件before-upload代码

$u.$parent代码

由代码我们可以看到，当你页面定义了name的时候是与$parent函数的入参name不相等的，即使你定义的name为空

//定义了name为空字符串
<script>
export default {
  name: '' 
}
</script>

//定义了name为APP
<script>
export default {
  name: 'App' 
}
</script>


export default function $parent(name = undefined) {
	let parent = this.$parent;
	while (parent) {
		// 上两种情况在$parent方法中都会走到下面的判断中
        // 微信小程序中获取parent.$parent的值为undefined，所以最终返回fale
		if (parent.$options && parent.$options.name !== name) {
			parent = parent.$parent;
		} else {
			return parent;
		}
	}
	return false;
}

解决方法：

方法一：页面去掉定义name

<script>
export default {
  data() {
    return {
      
    }
  }
}
</script>

方法二：重写$parent方法,增加一个判断

export  function $parent(name = undefined) {
	let parent = this.$parent;
	// 通过while历遍，这里主要是为了H5需要多层解析的问题
	while (parent) {
		// 父组件
		if (parent.$parent === undefined && name === undefined) {
			return parent;
		} else if (parent.$options && parent.$options.name !== name) {
			// 如果组件的name不相等，继续上一级寻找
			parent = parent.$parent;
		} else {
			return parent;
		}
	}
	return false;
}

然后在main文件注册

import { $parent} from '@/utils/index'
Vue.prototype.$u.$parent = $parent