uni-app 字节跳动小程序 父组件调不到子组件的方法

uni-app 字节跳动小程序 父组件调不到子组件的方法

操作步骤：

子组件方法：
init_popup(page, source) {
var that = this;
if (page != null) that.from_page = page;
if (source != null) that.source = source;
}
父组件调子组件：
<popup ref="popup"></popup>  

父组件调用子组件内的方法：
this.$refs.popup.init_popup('lp_detail');

预期结果：

正常打印

实际结果：

vendor.js:94 TypeError: Cannot read property 'init_popup' of undefined

bug描述：

uniapp 自定义组件，在微信小程序下，父组件调用子组件的方法可以正常调用。在字节跳动小程序下报Cannot read property ‘init_popup’ of undefined。

组件名：popup  
子组件方法：  
init_popup(page, source) {  
    var that = this;  
    if (page != null) that.from_page = page;  
    if (source != null) that.source = source;  
}  
父组件调子组件：  
<popup ref="popup"></popup>  

父组件调用子组件内的方法：  
this.$refs.popup.init_popup('lp_detail');
项目信息 详细信息
产品分类 uniapp/小程序/微信
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win7 专业版
HBuilderX类型 正式
HBuilderX版本号 3.2.2
第三方开发者工具版本号 3.1.4
基础库版本号 2.22
项目创建方式 HBuilderX


更多关于uni-app 字节跳动小程序 父组件调不到子组件的方法的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

延迟一下调用

更多关于uni-app 字节跳动小程序 父组件调不到子组件的方法的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在线等

这个问题是由于字节跳动小程序中组件渲染时机与微信小程序不同导致的。在字节跳动小程序中，$refs 可能在组件还未完全初始化时就被访问，导致引用为 undefined。

解决方案：

  1. 使用 nextTick 延迟调用
    在父组件中，将调用子组件方法的代码包裹在 this.$nextTick 中，确保子组件已渲染完成：

    this.$nextTick(() => {
    this.$refs.popup.init_popup('lp_detail');
});

  2. 使用 v-if 控制组件渲染
    如果子组件的渲染依赖于某些条件，可以使用 v-if 确保组件在需要时才渲染，并在渲染后调用方法：

    // 在父组件中
data() {
    return {
        showPopup: false
    };
},
methods: {
    callPopupMethod() {
        this.showPopup = true;
        this.$nextTick(() => {
            this.$refs.popup.init_popup('lp_detail');
        });
    }
}

    模板中：

    <popup ref="popup" v-if="showPopup"></popup>
回到顶部