uniapp renderjs

html 复制代码
<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>
相关推荐
Highcharts.js5 分钟前
Highcharts智能数据分析平台Orbit 多语言配置技术文档
java·前端·javascript·highcharts·orbit·智能数据分析·设置文档
ABAP-張旺39 分钟前
SAP ABAP 实战:SAP GUI上做 HTML 看板报表
前端·html·sap·abap
时间的情敌1 小时前
Cesium 建筑单体化、3DTiles 分类、楼层显隐、分户高亮(BIM + 倾斜孪生高频)
前端·3d·cesium
IT_陈寒1 小时前
JavaScript项目实战经验分享:从内存泄漏到性能优化的血泪史
前端·人工智能·后端
恋猫de小郭3 小时前
Flutter 3.50 & Dart 3.14 发布,快来看看有什么更新吧
android·前端·flutter
非优秀程序员10 小时前
第10章 千团出世|《互联网产品恩仇录》
前端
非优秀程序员10 小时前
第11章 小高在对面|《互联网产品恩仇录》
前端
非优秀程序员10 小时前
第14章 只剩美团|《互联网产品恩仇录》
前端
非优秀程序员10 小时前
第09章 老乡何必为难老乡|《互联网产品恩仇录》
前端
非优秀程序员11 小时前
第07章 孙德良的阳谋|《互联网产品恩仇录》
javascript·后端