uniapp中使用renderjs（一）

最新推荐文章于 2024-05-15 15:11:50 发布

何忧非喜{傲娇的程序媛}

最新推荐文章于 2024-05-15 15:11:50 发布

阅读量6.7k

点赞数 3

分类专栏： uniapp 文章标签： vue renderjs

本文链接：https://blog.csdn.net/u013252962/article/details/117440898

版权

uniapp 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

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>