uni-app中使用RenderJs 使用原生js

RenderJs运行的层叫【视图层】，Uniapp原生Script叫【逻辑层】，逻辑层要调用视图层需要使用一个叫【watcher】，详细怎么调用呢
为了实现这两层之间的通信，uniapp提供了一些特定的机制。以下是对这些通信机制的详细解释，以及一个详细的示例，说明逻辑层如何调用视图层的watcher。
通信机制
‌通过this.$ownerInstance获取当前组件的ComponentDescriptor实例‌：
在RenderJs中，你可以通过this.$ownerInstance访问到当前组件的ComponentDescriptor实例。这个实例提供了与逻辑层通信的接口。
‌通过变乱和callMethod方法进行通信‌：
逻辑层可以触发变乱，并在RenderJs中监听这些变乱。
RenderJs也可以通过this.$ownerInstance.callMethod方法调用逻辑层中的方法，并传递数据。
举例：

1. <template>
2.   <view>
3.     <!-- 视图层组件，绑定:prop和:change:prop -->
4.     <view :prop="someData" :change:prop="renderScript.onDataChange"></view>
5.     <button @click="changeData">改变数据并触发watcher</button>
6.   </view>
7. </template>
9. <script>
10. export default {
11.   data() {
12.     return {
13.       someData: '初始数据', // 逻辑层数据
14.     };
15.   },
16.   methods: {
17.     changeData() {
18.       this.someData = '新数据'; // 改变数据，这将触发视图层的watcher
19.     },
20.     // 逻辑层接收来自视图层的数据（可选）
21.     receiveDataFromRenderJs(data) {
22.       console.log('从视图层接收到的数据:', data);
23.     },
24.   },
25. };
26. </script>
28. <script module="renderScript" lang="renderjs">
29. export default {
30.   data() {
31.     return {
32.       receivedData: '', // 用于存储从逻辑层接收到的数据
33.     };
34.   },
35.   methods: {
36.     onDataChange(newValue, oldValue, ownerVm, vm) {
37.       console.log('数据变化了，新值:', newValue, '旧值:', oldValue);
38.       
39.       // 可以在这里调用逻辑层的方法，并传递数据
40.       // ownerVm.callMethod('receiveDataFromRenderJs', { someKey: newValue });
41.     },
42.     // 视图层向逻辑层发送数据（示例）
43.     sendDataToLogicLayer() {
44.       // 假设这里有一些逻辑需要向逻辑层发送数据
45.       const dataToSend = { fromRenderJs: '这是视图层的数据' };
46.       this.$ownerInstance.callMethod('receiveDataFromRenderJs', dataToSend);
47.     },
48.   },
49. };
50. </script>

复制代码

解释
‌模板部分‌：
我们界说了一个视图层组件，并使用:prop和:change:prop绑定了逻辑层的数据和视图层的watcher方法。
当someData在逻辑层发生变革时，将触发renderScript.onDataChange方法。
‌逻辑层部分‌：
我们界说了一个someData数据和一个changeData方法，用于改变someData的值。
当someData的值改变时，将触发视图层的onDataChangewatcher方法。
我们还界说了一个receiveDataFromRenderJs方法，用于接收来自视图层的数据（固然在这个示例中并没有直接调用它，但展示了如何接收数据）。
‌视图层（RenderJs）部分‌：
我们界说了一个onDataChange方法，当逻辑层的数据变革时，这个方法将被调用。
在onDataChange方法中，我们可以访问新旧值，并可以在这里调用逻辑层的方法，传递数据。
我们还界说了一个sendDataToLogicLayer方法，用于演示如何从视图层向逻辑层发送数据。
通过这种方式，你可以在uniapp中实现逻辑层和视图层之间的有用通信

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。