当前位置: 首页 > 工具软件 > RenderJS > 使用案例 >

uniapp中使用renderjs(一)

仉英朗
2023-12-01

uniapp中使用renderjs,基础调用和data值渲染

<template>
	<view>
		<view class="message">{{message}}</view>
		<!-- :message="message" :change:message="renderTest.messageChanged"
		 service层一旦message发生改变,会调用 renderjs中的messageChanged的方法
		 -->
		<view @click="renderTest.onClick" :message="message" :change:message="renderTest.messageChanged" id="renderId"></view>
	</view>
</template>

<script>
	// service 层
	export default {
		data() {
			return {
				message: "这是service的测试message"
			}
		},
		onLoad() {
			plus.navigator.closeSplashscreen()
		},
		methods: {
			onViewClick(options) {
				console.log(options)
				this.message = options.test
				uni.showModal({
					title: "数据传递",
					content: options.test
				})
			},
			getMessage(options){
				console.log("测试renderjs调用此方法:"+JSON.stringify(options))
			}
		}
	}
</script>

<style>
	.message {
		font-size: 22px;
		margin-top: 80px;
	}
</style>

<script module="renderTest" lang="renderjs">
	export default {
		data() {
			return {

			}
		},
		mounted() {

		},
		methods: {
			// id 为 renderId的区域,点击触发的事件
			onClick(event, ownerInstance) {
				// 调用 service层的onViewClick方法,传值
				ownerInstance.callMethod('onViewClick', {
					test: '这是点击renderjs的区域,向service层传递变量'
				})
			},
			messageChanged(newValue, oldValue, ownerVm, vm){
				console.log("newValue*********"+newValue)
				console.log("oldValue*********"+oldValue)
				ownerVm.callMethod('getMessage',{
					test: '123'
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	#renderId {
		width: 100%;
		height: 2rem;
		background-color: #00818A;
	}
</style>

 类似资料: