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>
相关推荐
todaycode几秒前
Vue + CPP项目
javascript·c++·vue.js
ZC跨境爬虫4 分钟前
跟着 MDN 学CSS day_7:(层叠优先级与继承)
前端·css·数据库·ui·html
Shadow(⊙o⊙)10 分钟前
qt信号和槽链接的接入与断开
开发语言·前端·c++·qt·学习
慕斯fuafua10 分钟前
JS——DOM操作
前端·javascript·html
GISer_Jing14 分钟前
深入解析 Three.js:从架构设计到 WebGPU 渲染革命
javascript·信息可视化·webgl
微祎_19 分钟前
写给新手的 triton-inference-server-ge-backend:昇腾Triton推理服务后端到底是啥?
前端·人工智能·cann
烂不烂问厨房22 分钟前
两张图片拼接在一起中间有条白线
前端
掘金安东尼25 分钟前
浏览器跨域窗口通信技术调研:window.open 与 postMessage
前端
Highcharts.js2 小时前
缺失数据可视化图表开发实战|Highcharts创建人员出生统计面积图表示例
开发语言·前端·javascript·信息可视化·highcharts·图表开发
LaughingZhu9 小时前
Product Hunt 每日热榜 | 2026-05-21
前端·人工智能·经验分享·chatgpt·html