<script module="test" lang="renderjs">
	export default {
		mounted() {
			// ...
		},
		methods: {
			// ...
		}
	}
</script>

<template>
	<view>
		<!--  prop是個名字，可以隨意改，注意:change:[name]這兩個名字需要相同就行了  -->
		<!-- 從service層到renderjs：首先在template中綁定一個service中定義的值，然后在同樣的位置增加:change:(屬性名)=(renderjs的module名.觸發(fā)的方法)來實現(xiàn)通信。
簡單來說就是service負責數(shù)據(jù)的更改，通過template監(jiān)聽數(shù)據(jù)的變化來通知renderjs 
			this.$ownerInstance.callMethod方法必須通過點擊事件執(zhí)行-->

	<!-- msg是要向renderjs發(fā)送的數(shù)據(jù)，testRenderjs 為renderjs模塊名稱，onChange是renderjs中的監(jiān)聽方法 -->
		<view :prop="msg" :change:prop="testRenderjs.onChange" id="renderjs-view">{{msg}}</view>

		<button @tap="changeMsgFn">點擊修改options</button>

		<button @tap="testRenderjs.emitData">直接調(diào)用renderjs中的emitData方法</button>
	</view>
</template>
<script>
	// 原先的script，這里被稱為service層 
	export default {
		data() {
			return {
				// 這里存放準備傳遞給renderjs的數(shù)據(jù)  
				msg: "我是service層原來的msg"
			}
		},
		methods: {
			// 觸發(fā)service層 出入renderjs數(shù)據(jù)改變
			changeMsgFn() {
				//  修改msg 觸發(fā)change
				this.msg = "msg的值變了"
			},
			// 接收renderjs發(fā)回的數(shù)據(jù)
			acceptDataFromRenderjs(data) {
				console.log('從renderjs中接收到的數(shù)據(jù)', data)
				this.msg = data.content
			}
		}
	}
</script>
<!--  testRenderjs 為renderjs模塊名稱，lang固定寫法 -->
<script module="testRenderjs" lang="renderjs">
	export default {
		data() {
			return {
				content:"我是來自renderjs的數(shù)據(jù)"
			}
		},
		created() {
			console.log('renderjs初始化完畢')
		},
		mounted() {
			const view = document.getElementById('renderjs-view')
			const button = document.createElement('button')
			button.innerText = '一個按鈕'
			view.appendChild(button)
		},
		methods: {
			// 接收邏輯層service層發(fā)送的數(shù)據(jù)
			onChange(newValue, oldValue, ownerInstance, instance) {
				console.log('service層中的options發(fā)生變化')
				console.log('新值newValue', newValue)
				console.log('舊值oldValue', oldValue)
				// ownerInstance和this.$ownerInstance一樣，可用來向service層通信     
				// instance和ownerInstance的區(qū)別是：       
				// instance.$el指向的是觸發(fā)事件的那個節(jié)點；ownerInstance.$el指向當前vue文件中的根節(jié)點；    
				// instance的作用目前尚不明確，官方?jīng)]有給出用法   
			},
			// 發(fā)送數(shù)據(jù)到service層
			emitData(event, ownerInstance) {
				// event是事件對象
				
				ownerInstance.callMethod('acceptDataFromRenderjs', {
					content: this.content
				})
				// 或者
				/* this.$ownerInstance.callMethod('acceptDataFromRenderjs',{
					content:this.content
				}) */
				// 需要注意的是：只有通過在template中用戶手動操作觸發(fā)renderjs的方法參數(shù)是這兩個：event, ownerInstance；通過其他方法觸發(fā)的函數(shù)參數(shù)不一樣
			}
			
		}
	}
</script>