uniapp renderjs

1. <template>
2.         <view class="content">
3.                 <p>count:{{count}}</p>
4.                 <p>useCountStore.count:{{useCountStore.count}}</p>
5.                 <p>info:{{info}}</p>
6.                 <button @click="add" size="mini">add()</button>
7.                 <button @click="addN(3)" size="mini">addN(3)</button>
8.                 <button @click="useCountStore.add" size="mini">useCountStore.add()</button>
9.                 <button @click="useCountStore.addN(3)" size="mini">useCountStore.addN(3)</button>
10.                 <button @click="testRenderjs.add" size="mini">testRenderjs.add()</button>
11.                 <button @click="testRenderjs.addN" size="mini">testRenderjs.addN()</button>
12.                 <button @click="testRenderjs.changeInfo" size="mini">testRenderjs.changeInfo()</button>
13.                 <!-- testRenderjs为renderjs中的名字 -->
14.                 <view id="testRenderjs" :info="info" :change:info="testRenderjs.receiveInfo" :count="useCountStore.count"
15.                         :change:count="testRenderjs.receiveCount">
16.                 </view>
17.         </view>
18. </template>
20. <script lang="ts">
21.         import { ref, onMounted, computed } from 'vue'
22.         import useStore from "@/stores";
23.         export default {
24.                 setup() {
25.                         const { useCountStore } = useStore();
26.                         const count = computed(() => { return useCountStore.count || 0 });
27.                         const add = useCountStore.add;
28.                         const addN = useCountStore.addN;
29.                         const info = ref('一开始的数据');
30.                         function receiveRenderData(val : any) {
31.                                 console.log('renderjs返回的值-->', val);
32.                                 info.value = val;
33.                         }
34.                         onMounted(() => {
35.                                 setTimeout(() => {
36.                                         info.value = '变化后的数据';
37.                                 }, 1000);
38.                         })
40.                         // 返回值会暴露给模板和其他的选项式 API 钩子
41.                         return {
42.                                 useCountStore,
43.                                 count,
44.                                 info,
45.                                 add,
46.                                 addN,
47.                                 receiveRenderData
48.                         }
49.                 },
50.         }
51. </script>
52. <script module="testRenderjs" lang="renderjs">
53.         import {
54.                 ref
55.         } from 'vue'
57.         export default {
58.                 setup() {
59.                         const testRenderjsData = ref('我是来自renderjs的数据');
60.                         // 发送数据到逻辑层
61.                         function changeInfo(e, ownerVm) {
62.                                 ownerVm.callMethod('receiveRenderData', testRenderjsData.value);
63.                         }
64.                         // 接收逻辑层发送的数据
65.                         function receiveInfo(newValue, oldValue) {
66.                                 console.log(newValue, oldValue, 'info----------------');
67.                         }
68.                         // 调用逻辑层函数
69.                         function add(e, ownerVm) {
70.                                 ownerVm.callMethod('add');
71.                                 // ownerVm.callMethod('useCountStore.add'); // useless
72.                                 // ownerVm.callMethod('useCountStore/add'); // useless
73.                         }
75.                         function addN(e, ownerVm) {
76.                                 ownerVm.callMethod('addN', 3);
77.                         }
78.                         // 接收逻辑层发送的数据
79.                         function receiveCount(newValue, oldValue) {
80.                                 console.log(newValue, oldValue, 'count----------------');
81.                         }
83.                         return {
84.                                 testRenderjsData,
85.                                 add,
86.                                 addN,
87.                                 changeInfo,
88.                                 receiveInfo,
89.                                 receiveCount
90.                         }
91.                 }
92.         }
93. </script>
95. <style>
96.         .content {
97.                 display: flex;
98.                 flex-direction: column;
99.                 align-items: center;
100.                 justify-content: center;
101.         }
102. </style>

复制代码

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