uni-app input标签的@input事件调用全局函数（$upData）时的bug

uni-app input标签的@input事件调用全局函数（$upData）时的bug

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

操作步骤：

…

预期结果：

main.js中的全局函数，被其他页面的Input标签的@input事件调用时，可以获取到页面的this

实际结果：

获取不到this

bug描述：

<template>
    <view>  
        <input  :value="qwData" id="qwData" [@input](/user/input)="$upData" confirm-type="next" [@confirm](/user/confirm)="$nextInput(1)" />  
    </view>
</template>  
<script>  
export default {  
    data(){  
        return {  
            qwData: ''  
        }  
    },  
    methods: {}  
}  
</script>  
<style>
</style>

main.js

Vue.prototype.$upData = function(e){  
    console.log(this);  
}  
Vue.prototype.$nextInput = function(index){  
    console.log(this);  
}

@input事件调用的全局函数（$upData）获取不到页面的this。 而@confirm事件调用的全局函数（$nextInput）可以获取到页面的this


更多关于uni-app input标签的@input事件调用全局函数（$upData）时的bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app input标签的@input事件调用全局函数（$upData）时的bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中，@input事件调用全局函数时无法获取页面this的原因是事件处理机制不同。

@input是持续触发的事件，当通过Vue.prototype定义的全局函数被直接调用时，函数内部的this指向的是全局Vue实例，而非当前页面组件实例。这符合JavaScript的函数作用域规则。

而@confirm事件能够获取正确this是因为它触发的时机不同，可能通过其他方式绑定了正确的上下文。

解决方案：

  1. 修改事件绑定方式：
<input :value="qwData" @input="(e) => $upData(e)" />
  1. 在全局函数中手动传递上下文：
// main.js
Vue.prototype.$upData = function(e, context = null) {
    const vm = context || this;
    // 使用vm替代this
}

// 页面中
<input :value="qwData" @input="(e) => $upData(e, this)" />
  1. 使用mixins或页面方法包装：
// 页面methods中
methods: {
    handleInput(e) {
        this.$upData.call(this, e);
    }
}
回到顶部