uni-app renderjs在app端无法通过this获取prop和data的值

uni-app renderjs在app端无法通过this获取prop和data的值

开发环境 版本号 项目创建方式
Mac 12.2 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Mac

PC开发环境操作系统版本号：12.2

HBuilderX类型：正式

HBuilderX版本号：3.3.10

手机系统：全部

手机厂商：苹果

页面类型：vue

vue版本：vue3

打包方式：云端

项目创建方式：HBuilderX

测试过的手机：

  • ios模拟器
  • 华为nova7
  • 锤子坚果3

示例代码：

<template>  
    <view class="content">  
        <view id="echarts" :option="option" :oid="id" :change:oid="echarts.changeid" :change:option="echarts.changeData" class="echarts"></view>  
    </view>  
</template>  

<script>  
    export default {  
        props: {  
            id: { type: String, default: '123' },  
        },  
        data() {  
            return {  
                option:[]  
            }  
         },  
         mounted(){  
             setTimeout(()=>{  
                 this.option.push(1);  
             },1000)  
         },    
         methods:{  
             sayHello(a){  
                 uni.showToast({  
                    title:`点击了${a}`  
                 })  
             }  
         }  
    }  
</script>  

<script module="echarts" lang="renderjs">  
    let instance = null;  
    export default {  
        mounted() {  
            setTimeout(()=>{  
                console.log('props:', this.id, 'data:', this.option)  
            },1000)  

         window.onClickTest = (a)=>{  
             console.log(this.$ownerInstance)  
             instance.callMethod('sayHello',a)  
         }  
         let echarts = document.getElementById("echarts");  
         echarts.innerHTML = `<button type="button" onclick="onClickTest(45)">点我试一试</button>`  
        },  
        methods: {  
            changeData(v,old,oi){  
                console.log('v,old,oi: ', v,old,oi, oi)  
                if(!instance){  
                    instance = oi  
                }  
            },  

            changeid(data, old, i){  
                console.log('vm, old, i: ', data, old, i)  

            }  
        }  
    }  
</script>

更多关于uni-app renderjs在app端无法通过this获取prop和data的值的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

非Bug，renderjs本身就是受限的且隔离的，跟script不是直接互通的，只能通过规范的change和callMethod互通

更多关于uni-app renderjs在app端无法通过this获取prop和data的值的实战教程也可以访问 https://www.itying.com/category-93-b0.html


那怎么改呢，callMethod将数据传到外部，change是什么，例子有吗

通过change 可以输出 接受的数据到 控制台，但是无法访问具体的属性值，newValue.xxx 的结果是undefined，但是输出newValue 可以看到全部值，newValue是一个对象值

请提供下测试工程和具体版本信息。

updateEcharts(newValue, oldValue, ownerInstance, instance) { console.log(‘newValue:’, newValue); console.log(‘this’,ownerInstance.$vm(‘天’)) newValue.tooltip.formatter = function(params) { console.log(params) let str =this.base.todate(params[0].axisValueLabel) + ‘
’; params.forEach((item, idx) => { str += ${item.marker}${item.seriesName}: ${item.data[1]} switch (idx) { case 0: str += newValue.tooltip.text; break; case 1: str += ‘kg’; break; case 2: str += ‘%’; break; case 3: str += ‘%’; break; case 4: str += ‘mg/l’; break; case 5: str += ‘(1000/ml)’; break; } str += idx === params.length - 1 ? ‘’ : ‘
’ }) return str } //监听 service 层数据变更 myChart.setOption(newValue, true); myChart.resize(); }, 我现在就遇见一个这样的情况，我想使用this.xxx的方式访问组件方法，但是在app端获取不到，有解决办法吗？

在uni-app中使用renderjs时，确实会遇到在APP端无法直接通过this获取props和data值的问题。这是因为renderjs运行在独立的JS环境中，与Vue实例隔离。

解决方案是：

  1. 通过this.$ownerInstance获取Vue实例
  2. 使用:change:propName监听属性变化

在你的代码中已经正确使用了第二种方式，但第一种方式可以优化为：

// 在renderjs中获取props和data
const vm = this.$ownerInstance
const id = vm.props.id
const option = vm.data.option

对于你当前的代码问题，建议：

  1. 确保所有props和data都通过:change:监听
  2. 使用$ownerInstance获取Vue实例后调用方法

修改后的renderjs部分示例：

methods: {
    changeData(v, old, oi){
        if(!instance){
            instance = oi
            const vm = instance.$vm
            console.log('props:', vm.id, 'data:', vm.option)
        }
    }
}
回到顶部