uni-app 与 renderjs 通信

一、页面与renderjs模块通信

页面 view 中监听变量 operation

<!-- 监听变量 operation 的变化，operation 发生改变时，调用 test 模块的 loadOperation 方法 -->
<view :operation="operation" :change:operation="test.loadOperation">
	
</view>

当 operation 变化时，renderjs 中 loadOperation 被调用

loadOperation(newValue, oldValue, ownerInstance, instance) {
	// 数据变更
	this.clicked = newValue;

	// 向uni-app页面组件发送信息
	this.sendMsg();
}

二、renderjs 发送数据给页面

在 renderjs 中调用页面的 reciveMessage 方法

sendMsg() {
	// 向页面传参
	this.$ownerInstance.callMethod('reciveMessage', ++this.count)
},

页面中定义 reciveMessage 方法

/**
* 接收 renderjs 传过来的数据
 * @param {Object} data
 */
reciveMessage: function(data) {
	this.total = data;
}

完整代码示例

<template>
	<view>
		<view>您总共点击了 {{total}} 次</view>
		<br />
		<!-- 监听变量 operation 的变化，operation 发生改变时，调用 test 模块的 loadOperation 方法 -->
		<button @click="onClick" :operation="operation" :change:operation="test.loadOperation">点击</button>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				operation: null,
				total:0,
				checked: false
			}
		},
		onLoad() {
		},
		methods: {
			onClick: function(e) {
				this.checked = !this.checked;
				this.operation = {a:1,b:this.checked}
			},
			/**
			 * 接收 renderjs 传过来的数据
			 * @param {Object} data
			 */
			reciveMessage: function(data) {
				this.total = data;
			}
		}
	}
</script>
<script module="test" lang="renderjs">
	export default {
		data() {
			return {
				clicked: false,
				count: 0
			}
		},
		methods: {
			loadOperation(newValue, oldValue, ownerInstance, instance) {
				console.log('newValue',newValue)
				// 数据变更
				this.clicked = newValue;

				// 向uni-app页面组件发送信息
				this.sendMsg();
			},
			sendMsg() {
				// 向页面传参
				this.$ownerInstance.callMethod('reciveMessage', ++this.count)
			},
		}
	}
</script>
<style>

</style>