renderjs 与 app-vue之间数据交互

renderjs 与 app-vue之间数据传值

renderjs

renderjs

renderjs 的主要作用：

• 大幅降低逻辑层和视图层的通讯损耗，提供高性能视图交互能力
• 在视图层操作dom，运行 for web 的 js库

renderjs 部分注意事项： 具体看文档

• APP 端可以使用 dom、bom API，不可直接访问逻辑层数据，不可以使用 uni 相关接口（如：uni.request）
• 观测更新的数据在视图层可以直接访问到。

效果图

template

<template>
	<view class="renderWrap">
        <view>
            <button type="primary" @click="renderJS.sendData">视图层 发送数据到 逻辑层button>
            
            <button class="margin-top-md margin-bottom-md" type="warn" @click="changeMsg">逻辑层 修改 msg 值button>
            
            <button type="primary" @click="renderJS.renderMsg">视图层 修改 逻辑层值button>

            <view class="margin-top-md margin-bottom-md text-center" :msg="msg" :change:msg="renderJS.receiveMsg">
                {{msg}}
            view>
        view>
    view>
template>

js

• renderJS 命名自定义

<script module="renderJS" lang="renderjs">
	export default {
		data() {
			return {
				name: '我是renderjs module!',
				message: ''
			}
		},
		methods: {
			renderMsg(event, ownerInstance) {
				// 调用 Model 层的 renderClick方法，进行传值
				ownerInstance.callMethod('renderClick', {
					value: 'renderjs 向 Model 层传递数据，并修改了 msg 值'
				})
			},
			// 接收 逻辑层发送的数据
			receiveMsg(newValue, oldValue, ownerVm, vm) {
				console.log('监听 msg 值：', newValue, oldValue)
			},
			// 发送数据到 逻辑层
			sendData(e, ownerVm) {
				ownerVm.callMethod('receiveRenderSendData', this.name)
			}
		}
	}
</script>

<script>
	export default {
		data() {
			return {
				msg: '我是Model层的msg'
			}
		},
		methods: {
			// 触发逻辑层，renderjs 接收数据
			changeMsg() {
				this.msg = "修改 msg 值，并执行 receiveMsg 方法";
			},
			// 接收 renderjs 发送的数据
			receiveRenderSendData(val) {
				this.msg = `Model 接收 View层 值：${val}`;
			},
			//接收 renderjs 传递数据
			renderClick(e) {
				this.msg = e.value
			}
		}
	}
</script>