uni-app头条小程序真机调试时u-form-item代码中的this.$u.$parent.call(this, 'u-form')无法获取到父组件

uni-app头条小程序真机调试时u-form-item代码中的this.$u.$parent.call(this, ‘u-form’)无法获取到父组件

开发环境 版本号 项目创建方式
Windows Windows_NT x64 10.0.18362 HBuilderX

示例代码:

mounted() {  
    // 支付宝、头条小程序不支持provide/inject,所以使用这个方法获取整个父组件,在created定义,避免循环应用  
    this.parent = this.$u.$parent.call(this, 'u-form');  
    //如下是我添加的测试代码     
    if(this.parent.fields){               
            console.log("6666");  
            this.$u.toast('6666');  
    }  
...  
}

操作步骤:

见上面缺陷的描述。

预期结果:

望头条小程序的真机调试时(iphone 6 plus),u-form-item 可以 获取的父组件。

实际结果:

发现u-form-item.vue文件里this.$u.$parent.call(this, 'u-form')是获取不到的父组件。

bug描述:

在头条小程序的真机调试时(iphone 6 plus),发现提交一个表单,提交没反应。 排查发现: 是u-form-item 控件this.$u.$parent.call(this, 'u-form'); 获取不到父组件导致。

同样的代码,在头条小程序的模拟器是没有这个问题。在百度小程序、微信小程序的真机调试也没有这个问题。


更多关于uni-app头条小程序真机调试时u-form-item代码中的this.$u.$parent.call(this, 'u-form')无法获取到父组件的实战教程也可以访问 https://www.itying.com/category-93-b0.html

18 回复

upup

更多关于uni-app头条小程序真机调试时u-form-item代码中的this.$u.$parent.call(this, 'u-form')无法获取到父组件的实战教程也可以访问 https://www.itying.com/category-93-b0.html


尝试在 mounted 生命周期函数中使用 nextTick 来执行你的 this.parent = this.$u.$parent.call(this, ‘u-form’) 逻辑,如果仍旧无法解决,请提供可以复现该问题的 DEMO 上传以便排查。

使用了nextTick 仍然不行:在头条小程序的模拟器是没有这个问题。在头条小程序真机就这个问题–如下this.$u.toast根本就没有进去,说明获取不到父组件
u-form-item.vue文件里: // 组件创建完成时,将当前实例保存到u-form中
mounted() {

        this.$nextTick(() => {  
                             // 支付宝、头条小程序不支持provide/inject,所以使用这个方法获取整个父组件,在created定义,避免循环应用  
            this.parent = this.$u.$parent.call(this, 'u-form');  

            if(this.parent){                  
                console.log("66668");  
                this.$u.toast('66668');  
            }  

            if (this.parent) {  
                //  
                // 历遍parentData中的属性,将parent中的同名属性赋值给parentData  
                Object.keys(this.parentData).map(key => {  
                    this.parentData[key] = this.parent[key];  
                });  
                // 如果没有传入prop,或者uForm为空(如果u-form-input单独使用,就不会有uForm注入),就不进行校验  
                if (this.prop) {  
                    setTimeout(() =>{  
                        console.log("coming");  
                        this.$u.toast("coming");  
                    },2000);  
                    // 将本实例添加到父组件中  
                    this.parent.fields.push(this);  
                    this.errorType = this.parent.errorType;  
                    // 设置初始值  
                    this.initialValue = this.fieldValue;  
                    // 添加表单校验,这里必须要写在$nextTick中,因为u-form的rules是通过ref手动传入的  
                    // 不在$nextTick中的话,可能会造成执行此处代码时,父组件还没通过ref把规则给u-form,导致规则为空  

                    this.setRules();  

                }  
            }  
        })  
    },<br>

提交一个可复现的demo上传

回复 雨夜敬清秋: 已经提交demo,帮忙看看

附件的demo可以复现。跑起来后,可以看到一个登陆页面。
H5或头条小程序上模拟器里,填写手机号码,如果格式不正常,可以在字段下发提示的。点击按钮可以触发提示“正常触发提交”或“校验失败”–有反应就认为是正常的。
但是在头条小程序的真机测试里,填写手机号码,如果格式不正常,没有提示的。而且,点击按钮后,没有任何反应。

回复 雨夜敬清秋: 附件里的demo是源码,选择字节小程序开发工具跑起来。字节小程序 有什么问题吗

回复 astonish: 你首先要找到 uview-ui/libs/function/$parent.js ,看一下 $parent 函数里咋写的,看到 parent.$options.name 吗?你的父组件要命名一个 name: ‘u-form’ 啊

回复 astonish: 编辑一下帖子,把 bug反馈 这个标签去掉,你这个问题和 uniapp bug 无关

回复 雨夜敬清秋: 1、父组件是u-form控件,我看了他们的属性定义,是不支持设置name属性的;我也尝试在表单页面中的u-form控件上增加了name=“u-form”,也仍然不行的。2、同样的代码,百度小程序、微信小程序都是可以的哦,我想这是个bug。3、可以去掉Bug反馈。还需要你能帮忙看看是什么情况

回复 astonish: export default { name: ‘u-form’, components: {} …

回复 雨夜敬清秋: 但是,\uview-ui\components\u-form\u-form.vue 原来的代码里已经有个了的 export default { name: ‘u-form’, …。您再看看

回复 astonish: 哦,我发现问题所在了,在字节小程序中,u-form-item 组件所指向的 父组件不是 u-form,而是 pages/login/mobilelogin.vue 这确实是一个 bug

mounted() {
this.$nextTick(() => {
// 支付宝、头条小程序不支持provide/inject,所以使用这个方法获取整个父组件,在created定义,避免循环应用
// #ifdef MP-TOUTIAO
this.parent = this.$parent.$refs.uForm;
// #endif
// #ifndef MP-TOUTIAO
this.parent = this.$u.$parent.call(this, ‘u-form’);
// #endif

我在\uview-ui\components\u-form\u-form-item.vue文件里,按你上面的整个方式调整了代码,仍然是不行的哦。甚至在字节小程序的模拟器上都不行了(原来是可以的)。在真机上也是不行。

回复 astonish: 我这在点击登录时已经没有问题了,但是无法实时监听输入并反馈,总体来说,这是uview的问题,因为这个ui框架并没有兼容字节小程序,所有有关$parent的指向都是不正确的,你可以反馈给这个框架的作者,或者尝试使用该ui框架的最新版本。

请问题主,尝试过在【企业微信小程序模式】下,同样无法触发 u-form 组件 的 ref 吗?

在头条小程序真机环境下,this.$u.$parent.call(this, 'u-form') 获取父组件失败是由于头条小程序对组件层级遍历的实现与模拟器存在差异。建议改用以下方案:

  1. 使用 this.$parent 直接获取父组件,通过循环判断组件名:
let parent = this.$parent
while (parent) {
    if (parent.$options.name === 'u-form') break
    parent = parent.$parent
}
  1. 添加空值保护:
if (parent && parent.fields) {
    // 正常逻辑
} else {
    console.error('未找到u-form父组件')
}
回到顶部