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>
相关推荐
IT_陈寒1 分钟前
Vite开发爽是爽,但这个动态导入坑差点让我崩溃
前端·人工智能·后端
Mr_pyx5 分钟前
CompletableFuture 使用全攻略:从异步编程到异常处理
linux·前端·python
Hello--_--World6 分钟前
React:状态管理 官网笔记
前端·笔记·react.js
花归去6 分钟前
a-table 冻结列导致边框
前端·css·css3
kuuailetianzi7 分钟前
Vue 3图片全屏预览组件:打造专业级图像浏览体验
前端·javascript·microsoft
前端杂货铺8 分钟前
manifold-3d——在 Vue 项目中实现干涉检查
前端·vue.js·manifold
恋猫de小郭15 分钟前
Bun 官方将正式支持 Android,Claude Code 未来可以直接在手机上跑
android·前端·ai编程
晓得迷路了26 分钟前
栗子前端技术周刊第 126 期 - Rspack 2.0、TypeScript 7.0 Beta、Git 2.54...
前端·javascript·ai编程
nLYA SCOL26 分钟前
MySQL数据的增删改查(一)
android·javascript·mysql
小小码农Come on27 分钟前
单例 QtObject 全局配置
开发语言·前端·javascript