uni-app renderjs 无法调用 this.$ownerInstance.callMethod

uni-app renderjs 无法调用 this.$ownerInstance.callMethod

开发环境 版本号 项目创建方式
Windows Windows 10 企业版 LTSC 21H2 HBuilderX

产品分类：
uniapp/App

PC开发环境操作系统：
Windows

HBuilderX类型：
正式

HBuilderX版本号：
4.76

手机系统：
Android

手机系统版本号：
Android 15

手机厂商：
小米

手机机型：
红米K70至尊

页面类型：
vue

vue版本：
vue3

打包方式：
云端

示例代码：

<template>  
    <view class="container">  
        <view class="btn" @click="onClick()">开始 </view>  
    </view>  
</template>  

<script module="animate" lang="renderjs">  
    export default {  
        methods: {  
            setText(value) {  
                console.log(value);  
            }  
        }  
    }  
</script>  

<script>  
    export default{  
        methods:{  
            onClick(){  
                this.$ownerInstance.callMethod('setText','setText')  
            }  
        }  
    }  
</script>  

<style lang="less" scoped>  
    .container {  
        overflow: hidden;  
        background-color: antiquewhite;  
        width: 100vw;  
        height: 100vh;  
    }  

    canvas {  
        background-color: aqua;  
        transform-origin: 0 0;  
    }  

    .btn {  
        position: fixed;  
        right: 40rpx;  
        top: 80rpx;  
        color: white;  
        font-weight: bold;  
        font-size: 36rpx;  
        z-index: 1;  
        text-shadow: 0 0 5rpx #000;  
    }  
</style>

操作步骤：
直接运行代码即可

预期结果：
可以调用callMethod 传参

实际结果：
报错 未定义

bug描述：
vue3选项式页面。 使用renderjs 渲染数据时，发现socket中没法调用callMethod，hbuilderx内置浏览器没问题 ，内置浏览器的控制台看 也没有callMethod，有$vm 但是$vm app中也不存在，


更多关于uni-app renderjs 无法调用 this.$ownerInstance.callMethod的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

2025年了还没修复

更多关于uni-app renderjs 无法调用 this.$ownerInstance.callMethod的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 的 Vue 3 环境下，this.$ownerInstance.callMethod 在 renderjs 中确实存在兼容性问题。这是由于 Vue 3 的组件实例结构与 Vue 2 不同，$ownerInstance 属性在 Vue 3 中未被支持。

解决方案：

  1. 使用事件通信替代 callMethod 在 renderjs 中通过 this.$dispatch 向 Vue 组件发送事件：
// renderjs 模块
methods: {
    setText(value) {
        console.log(value);
        // 改为事件通信
        this.$dispatch('renderjs-event', {
            type: 'setText',
            data: value
        });
    }
}
  1. 在 Vue 组件中监听事件 在 template 中监听 renderjs 发出的事件：
<template>
    <view class="container" @renderjs-event="handleRenderjsEvent">
        <view class="btn" @click="onClick()">开始</view>
    </view>
</template>

<script>
export default {
    methods: {
        onClick() {
            // 不再使用 callMethod
        },
        handleRenderjsEvent(e) {
            const { type, data } = e.detail;
            if (type === 'setText') {
                // 处理 renderjs 传来的数据
                console.log('收到 renderjs 数据:', data);
            }
        }
    }
}
</script>
回到顶部