注册 登录
astonish
astonish
  • 发布：2021-05-30 21:54
  • 更新：2022-05-14 22:58
  • 阅读：1525

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

分类：uni-app

产品分类： uniapp/小程序/字节跳动

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： Windows_NT x64 10.0.18362

HBuilderX类型： 正式

HBuilderX版本号： 3.1.13

第三方开发者工具版本号： 1.53.0

基础库版本号： 1.53.0

项目创建方式： HBuilderX

示例代码：

u-form-item.vue文件里：


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'); 获取不到父组件导致。

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

2021-05-30 21:54 负责人:无 分享

没有找到相关结果

    已邀请:
    astonish

    astonish (作者)

    upup

    2021-05-31 09:19 分享
    雨夜敬清秋

    雨夜敬清秋

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

    2021-05-31 09:47 分享
    astonish

    astonish (作者)

    使用了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();  

                    }  
                }  
            })  
        },
    2021-05-31 12:52 分享
    评论 取消
    astonish

    astonish (作者)

    附件的demo可以复现。跑起来后，可以看到一个登陆页面。

    H5或头条小程序上模拟器里，填写手机号码，如果格式不正常，可以在字段下发提示的。点击按钮可以触发提示“正常触发提交”或“校验失败”--有反应就认为是正常的。

    但是在头条小程序的真机测试里，填写手机号码，如果格式不正常，没有提示的。而且，点击按钮后，没有任何反应。

    2021-05-31 14:18 分享

    • astonish (作者)

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

      2021-06-01 08:22

    • 雨夜敬清秋

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

      2021-06-01 08:48

    • 雨夜敬清秋

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

      2021-06-01 08:59

    • astonish (作者)

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

      2021-06-01 09:39

    • 雨夜敬清秋

      回复 astonish: export default { name: 'u-form', components: {} ......

      2021-06-01 09:41

    • astonish (作者)

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

      2021-06-01 09:48

    • 雨夜敬清秋

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

      2021-06-01 10:13

    评论 取消
    astonish

    astonish (作者)

    upup

    2021-06-01 07:38 分享
    雨夜敬清秋

    雨夜敬清秋 

    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  
  ............
    2021-06-01 10:35 分享

    • astonish (作者)

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

      2021-06-01 18:55

    • 雨夜敬清秋

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

      2021-06-02 08:41

    评论 取消
    1***@qq.com

    1***@qq.com

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

    2022-05-14 22:58 分享
    为什么被折叠? 0 个回复被折叠

    要回复问题请先登录或注册

    退出全屏模式 全屏模式 回复
    友情链接
    优势智云 黑马程序员 程序员客栈 个推 锐亚教育 即速应用 DCloud新闻 InfoQ 蓝莺IM HeapDump性能社区 diygw可视化 申请友链

    DCloud 即数字天堂(北京)网络技术有限公司是W3C成员及HTML5中国产业联盟发起单位

    京ICP备12046007号-4 | 京公网安备：11010802035340号 | 国家信息安全等级保护三级，证书编号：11010813802-20001

    | | 违法违规信息举报