uniapp renderjs
<template><view class="content">
<p>count:{{count}}</p>
<p>useCountStore.count:{{useCountStore.count}}</p>
<p>info:{{info}}</p>
<button @click="add" size="mini">add()</button>
<button @click="addN(3)" size="mini">addN(3)</button>
<button @click="useCountStore.add" size="mini">useCountStore.add()</button>
<button @click="useCountStore.addN(3)" size="mini">useCountStore.addN(3)</button>
<button @click="testRenderjs.add" size="mini">testRenderjs.add()</button>
<button @click="testRenderjs.addN" size="mini">testRenderjs.addN()</button>
<button @click="testRenderjs.changeInfo" size="mini">testRenderjs.changeInfo()</button>
<!-- testRenderjs为renderjs中的名字 -->
<view id="testRenderjs" :info="info" :change:info="testRenderjs.receiveInfo" :count="useCountStore.count"
:change:count="testRenderjs.receiveCount">
</view>
</view>
</template>
<script lang="ts">
import { ref, onMounted, computed } from 'vue'
import useStore from "@/stores";
export default {
setup() {
const { useCountStore } = useStore();
const count = computed(() => { return useCountStore.count || 0 });
const add = useCountStore.add;
const addN = useCountStore.addN;
const info = ref('一开始的数据');
function receiveRenderData(val : any) {
console.log('renderjs返回的值-->', val);
info.value = val;
}
onMounted(() => {
setTimeout(() => {
info.value = '变化后的数据';
}, 1000);
})
// 返回值会暴露给模板和其他的选项式 API 钩子
return {
useCountStore,
count,
info,
add,
addN,
receiveRenderData
}
},
}
</script>
<script module="testRenderjs" lang="renderjs">
import {
ref
} from 'vue'
export default {
setup() {
const testRenderjsData = ref('我是来自renderjs的数据');
// 发送数据到逻辑层
function changeInfo(e, ownerVm) {
ownerVm.callMethod('receiveRenderData', testRenderjsData.value);
}
// 接收逻辑层发送的数据
function receiveInfo(newValue, oldValue) {
console.log(newValue, oldValue, 'info----------------');
}
// 调用逻辑层函数
function add(e, ownerVm) {
ownerVm.callMethod('add');
// ownerVm.callMethod('useCountStore.add'); // useless
// ownerVm.callMethod('useCountStore/add'); // useless
}
function addN(e, ownerVm) {
ownerVm.callMethod('addN', 3);
}
// 接收逻辑层发送的数据
function receiveCount(newValue, oldValue) {
console.log(newValue, oldValue, 'count----------------');
}
return {
testRenderjsData,
add,
addN,
changeInfo,
receiveInfo,
receiveCount
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
</style>
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]