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>
相关推荐
Carry34515 分钟前
不清楚的 .gitignore
前端·git
张鑫旭22 分钟前
AI时代2025年下半年学的这些Web前端特性有没有用?
前端·ai编程
pinkQQx23 分钟前
H5唤醒APP技术方案入门级介绍
前端
Lefan26 分钟前
UniApp 隐私合规神器!一键搞定应用市场审核难题 - lf-auth 隐私合规助手
前端
Null15526 分钟前
浏览器唤起桌面端应用(进阶篇)
前端·浏览器
Jing_Rainbow29 分钟前
【Vue-2/Lesson62(2025-12-10)】模块化与 Node.js HTTP 服务器开发详解🧩
前端·vue.js·node.js
风度前端1 小时前
用了都说好的 uniapp 路由框架
前端
冴羽1 小时前
2026 年 Web 前端开发的 8 个趋势!
前端·javascript·vue.js
码银1 小时前
ruoyi的前端(vue)新增的时候给字典设置默认值 但不能正常
前端
fengbizhe2 小时前
bootstrapTable转DataTables,并给有着tfoot的DataTables加滚动条
javascript·bootstrap