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>
相关推荐
#麻辣小龙虾#39 分钟前
基于vue3.0开发一款【固废与废气运维管理系统】(支持源码)
前端·vue.js·vue3
Cosolar44 分钟前
Docsify零构建文档站完全指南:从快速搭建到企业级部署
前端·开源·github
weixin_471383031 小时前
Taro-02-页面路由
前端·taro
星栈独行1 小时前
Makepad 应用如何读文件、调接口、保存数据
前端·程序人生·ui·rust·github
IT_陈寒2 小时前
Vite热更新失效?可能你在用Windows
前端·人工智能·后端
烬羽2 小时前
后端返回的 JSON 字符串,浏览器怎么"看懂"的?——Ajax 全链路拆解
javascript
tedcloud1232 小时前
taste-skill部署教程:打造个性化AI推荐工作流
服务器·前端·人工智能·系统架构·edge
xinhuanjieyi3 小时前
html修复游戏种太阳错误
前端·游戏·html
半个落月3 小时前
一个新手用 Bun + Axios 调通 DeepSeek API 的实践记录
javascript
不好听6133 小时前
深入理解链表:线性数据结构的另一面
javascript·数据结构