<template>
<view>
<!-- 这里的:change:msg 旨在于监听逻辑层的msg变化，有变化就调用renderjs内容 -->
<!-- 这里要注意，render。receiveMsg中的render是下面renderjs定义的module名称 -->
<view @click="render.emitData" :msg="msg" :change:msg="render.receiveMsg" class="renderjs" id="renderjs-view"></view>
<button @click="changeMsg" class="app-view">app-view</button>
</view>
</template>
<script>
export default {
data() {
return {
msg: ''
};
},
methods: {
// 改变数据，触发renderjs
changeMsg() {
this.msg = 'hello renderjs' + Math.random() * 10;
},
// 接收renderjs传递的数据
receiveRenderData(val) {
console.log('receiveRenderData-->', val);
}
}
};
</script>
<script module="render" lang="renderjs">
export default {
data() {
return {
name: 'render-vm'
}
},
mounted() {
const view = document.getElementById('renderjs-view')
const button = document.createElement('button')
button.innerText = '一个按钮'
view.appendChild(button)
},
methods: {
// 接收逻辑层传递的数据
receiveMsg(newValue, oldValue, ownerVm, vm) {
console.log('newValue', newValue)
console.log('oldValue', oldValue)
console.log('ownerVm', ownerVm)
console.log('vm', vm)
},
// 调用逻辑层的方法
emitData(e, ownerVm) {
ownerVm.callMethod('receiveRenderData', this.name)
}
}
};
</script>
天空微算
- 发布：2023-01-11 16:11
- 更新：2023-01-12 21:12
- 阅读：376
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： Win11
HBuilderX类型： 正式
HBuilderX版本号： 3.6.15
手机系统： Android
手机系统版本号： Android 9.0
手机厂商： 华为
手机机型： 无
页面类型： vue
vue版本： vue3
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
点击 按钮，无法监听到数据变化
点击 按钮，无法监听到数据变化
预期结果：
监听到数据变化
监听到数据变化
实际结果：
无法监听到数据变化
无法监听到数据变化
bug描述：
Vue3 renderjs 中无法监听逻辑层的msg变化
天空微算 (作者)
在新大陆PDA MT90 中就无法接收，我改成VUE2中就可以
2023-03-24 18:13