renderjs模式下，视图层与逻辑层的通信及调用

几个概念

1.视图层Dom：即页面中的template部分；

2.视图层脚本（js）：即renderjs模块下的<script>

3.逻辑层（也叫service层）：即控制页面逻辑及数据的普通js。

renderjs视图层与逻辑层之间的通信和方法调用

1.页面主体调用renderjs模块下的方法

可以通过renderjs模块下的created、mounted周期函数调用模块下里methods方法。或者在这些周期函数中执行dom操作

mounted() {
		var that=this;
		const wrapper=document.getElementById('bscroll');
		this.$nextTick(()=>{	
			setTimeout(()=>{
				let bsObj={
					scrollX: false,
					scrollY:true,
					click: true,
					tap:true
				};
				that.scroll = new BS(wrapper,bsObj);
			},500);
		});  
	}

2.视图层DOM调用视图层脚本js

（1）绑定事件，调用renderjs模块下的方法

@eventcase="module.method"

<view @click="echarts.onClick"></view>

<script module="echarts" lang="renderjs">
	export default {
		methods: {
			onClick(event, ownerInstance) {
			}
		}
	}
</script>

（2）监听逻辑层数据来驱动视图层js的方法

:props="data"+:change:props="module.method"

<view prop="option" :change:prop="echarts.updateEcharts"></view>

<script>
	export default {
		data() {
			return {
				option: {
					title: { text: 'ECharts 入门示例' }
				}
			}
		}
	}
</script>

<script module="echarts" lang="renderjs">
	let myChart
	export default {
		methods: {
			updateEcharts(newValue, oldValue, ownerInstance, instance) {
				// 监听 service 层数据变更
				myChart.setOption(newValue)
			}
		}
	}
</script>

3.视图层js调用逻辑层，通过ownerinstance.callMethod()。

<script>
export default {
	methods: {
		onViewClick(options) {
			console.log(options) //{test:'test'}
		}
	}
}
</script>

<script module="echarts" lang="renderjs">
let myChart
export default {
	methods: {
		onClick(event, ownerInstance) {
			// 调用 service 层的方法
			ownerInstance.callMethod('onViewClick', {
				test: 'test'
			})
		}
	}
}
</script>

很赞哦！ (0)