uni-app vue3 script setup renderjs 无法调用 ownerInstance.callMethod 的方法,没有任何提示。

uni-app vue3 script setup renderjs 无法调用 ownerInstance.callMethod 的方法,没有任何提示。

开发环境 版本号 项目创建方式
Windows 11 22H2 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：3.95

手机系统：Android

手机系统版本号：Android 13

手机厂商：小米

手机机型：11ultra

页面类型：vue

vue版本：vue3

打包方式：云端

App下载地址或H5网址：无

示例代码：

<template>  
    <view class="" :prop="data" :change:prop="example.bindAction">  
        这是一个测试用例，给Dcloud官方:{{data}}  
        <button @click="doPlus">点击按钮</button>  
    </view>  
</template>  

<script lang="renderjs" module="example">  
export default {  
    data() {  
        return {  
            fucker: null  
        };  
    },  
    methods: {  
        bindAction(newVal, oldVal, ownerInstance, instance) {  
            console.log('这里数据变更了', newVal);  
            ownerInstance.callMethod('chatWithRenderjs', 500 - 250);  
            this.$ownerInstance.callMethod('chatWithRenderjs',500-250);  
        }  
    }  
};  
</script>  
<script setup>  
import {} from 'vue';  

import {} from '[@dcloudio](/user/dcloudio)/uni-app';  

import {} from 'vuex';  
let data = $ref(250);  

function doPlus() {  
    data++;  
}  

function chatWithRenderjs(nomb) {  
    console.log('这里通信也成功啦', nomb);  
}  
defineExpose({  
    chatWithRenderjs  
});  
</script>  

<style scoped>  

</style>

更多关于uni-app vue3 script setup renderjs 无法调用 ownerInstance.callMethod 的方法,没有任何提示。的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

求解答，希望官方工作人员能够重视这个问题，现在 setup 语法糖应该是非常主流的代码方式了，如果无法正常接洽 renderjs，那开发体验就太差了！！！

更多关于uni-app vue3 script setup renderjs 无法调用 ownerInstance.callMethod 的方法,没有任何提示。的实战教程也可以访问 https://www.itying.com/category-93-b0.html


顶一顶，希望能被看到。

BUG 能够百分百复现希望 能够得到官方的重视。

renderjs 不支持 setup，可改用 Options API。

是否考虑后续 使得renderjs 能够兼容setup 写法呢？ 是技术层面不可行嘛？ 如果确定了 后续不再升级维护该部分，建议在文档中明确标明不支持setup 语法糖用法。

回复 8***@qq.com: 暂无计划支持，后续会补充到文档。另外更推荐使用 uni-app x，不存在通信问题。

在 uni-app 中使用 Vue 3 的 script setup 语法时，如果在 renderjs 中调用 ownerInstance.callMethod 方法没有效果，可能是以下几个原因导致的：

1. ownerInstance 未正确传递

确保 ownerInstance 已经正确传递到 renderjs 中。ownerInstance 是 uni-app 中用于调用父组件方法的实例。

<script setup>
import { ref } from 'vue';

const ownerInstance = ref(null);

const callParentMethod = () => {
  ownerInstance.value.callMethod('methodName');
};
</script>

<template>
  <view>
    <renderjs :owner-instance="ownerInstance" />
  </view>
</template>

2. 方法名错误

确保 callMethod 中的方法名与父组件中定义的方法名完全一致，包括大小写。

<script setup>
const methodName = () => {
  console.log('Parent method called');
};
</script>

3. renderjs 组件未正确配置

确保 renderjs 组件已经正确配置，并且 ownerInstance 已经绑定到 renderjs 组件上。

<template>
  <view>
    <renderjs :owner-instance="ownerInstance" />
  </view>
</template>

4. renderjs 组件内部问题

检查 renderjs 组件内部是否正确使用了 ownerInstance。确保在 renderjs 组件内部，ownerInstance 是有效的。

export default {
  props: {
    ownerInstance: {
      type: Object,
      required: true,
    },
  },
  mounted() {
    this.ownerInstance.callMethod('methodName');
  },
};

5. 调试信息

在调用 ownerInstance.callMethod 之前，可以添加一些调试信息，确保 ownerInstance 是有效的。

export default {
  props: {
    ownerInstance: {
      type: Object,
      required: true,
    },
  },
  mounted() {
    console.log('ownerInstance:', this.ownerInstance);
    this.ownerInstance.callMethod('methodName');
  },
};

6. 检查 uni-app 版本

确保你使用的 uni-app 版本支持 renderjs 和 ownerInstance.callMethod。如果版本过旧，可能会导致某些功能无法正常使用。

7. 检查 Vue 3 的兼容性

Vue 3 和 uni-app 的某些特性可能存在兼容性问题。确保你使用的 uni-app 版本与 Vue 3 兼容。

8. 使用 ref 获取实例

如果以上方法都无法解决问题，可以尝试使用 ref 获取 renderjs 组件的实例，然后直接调用方法。

<script setup>
import { ref } from 'vue';

const renderjsRef = ref(null);

const callRenderjsMethod = () => {
  renderjsRef.value.methodName();
};
</script>

<template>
  <view>
    <renderjs ref="renderjsRef" />
  </view>
</template>
回到顶部