- 发布：2022-01-30 10:27
- 更新：2024-08-02 17:37
- 阅读：3042
产品分类： uniapp/App
PC开发环境操作系统： Mac
PC开发环境操作系统版本号： 12.2
HBuilderX类型： 正式
HBuilderX版本号： 3.3.10
手机系统： 全部
手机厂商： 苹果
页面类型： vue
vue版本： vue3
打包方式： 云端
项目创建方式： HBuilderX
测试过的手机：
示例代码：
<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>
<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>操作步骤：
运行后，控制台无法打印出 this.id, this.option
运行后，控制台无法打印出 this.id, this.option
预期结果：
同H5的实现一样，可以直接通过this 直接拿到prop 和 data的数据
同H5的实现一样，可以直接通过this 直接拿到prop 和 data的数据
实际结果：
[LOG] : props:, undefined, data:, undefined at pages/index/index.vue:37
[LOG] : props:, undefined, data:, undefined at pages/index/index.vue:37
bug描述：
renderjs在app端，无法通过this获取prop和data的值
在H5上是可以的
目前，只能通过监听prop及data的change，在renderjs里获取对应的值
另外使用setup语法糖也会报错
通过change 可以输出 接受的数据到 控制台，但是无法访问具体的属性值，newValue.xxx 的结果是undefined，但是输出newValue 可以看到全部值，newValue是一个对象值
4***@qq.com - zry
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) + '</br>';
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 ? '' : '</br>'
})
return str
}
//监听 service 层数据变更
myChart.setOption(newValue, true);
myChart.resize();
},
我现在就遇见一个这样的情况，我想使用this.xxx的方式访问组件方法，但是在app端获取不到，有解决办法吗？
1***@qq.com
那怎么改呢，callMethod将数据传到外部，change是什么，例子有吗
2023-01-12 10:56