uniapp renderjs 逻辑层，视图层互相传递数据封装

uniapp renderjs 逻辑层，视图层互相传递数据封装

<template><view class="content"><view :prop="sender" :change:prop="renderMaps.handleAction"><button @click="renderMaps.viewInit">向逻辑层发送数据</button><button @click="luoInif">向视图层发送数据</button><button @click="luojiFn">触发逻辑层的方法</button></view></view>
</template>
<!-- 逻辑层 -->
<script>
export default {data() {return {sender: {handle: "", //调用视图层方法的名字callback: "", //回调函数的名字options: null, //传递给视图层的数据rendCallback: "", //视图层的回调函数的名字（可选）暂时无用},}},created() {console.log(1)// 逻辑层向视图层传递数据this.sendMsg("init", "handleFeaturePopup", { id: 10 }, (e) => {console.log("视图层回调函数执行了，可以在这里做一些逻辑处理", e)})},mounted() {console.log(2)},methods: {/*** 视图层触发逻辑层方法 类似子传父* @param event callback 逻辑层的方法名称* @param event param 传递给逻辑层的数据*/handleItemClick(event) {const handle = this[event.callback]handle && handle(event.param)},/*** 逻辑层传递数据到视图层 类似父传子** @param handle 触发视图层的方法名称* @param callback 逻辑层的方法名称* @param options 消息发送的配置选项* @param rendCallback 逻辑层的回调函数（可选）暂时无用*/sendMsg(handle, callback, options, rendCallback) {this.sender = {handle,callback,options,rendCallback,}},handleFeaturePopup(options) {console.log("options:", options)console.log("逻辑层接受到了数据:", options)},luoInif() {this.sendMsg("init", "handleFeaturePopup", { id: 100 }, (e) => {console.log("视图层回调函数执行了，可以在这里做一些逻辑处理", e)})},},
}
</script>
<!-- 视图层 -->
<!-- <script> -->
<script module="renderMaps" lang="renderjs">
let map = null
export default {data() {return {//逻辑层的方法名称callback: "",}},mounted() {console.log(3)},created() {console.log(4)},methods: {//监听逻辑层传递过来的数据handleAction(newValue, oldValue, ownerInstance, instance) {console.log("逻辑层传递过来的数据", newValue)const handle = this[newValue.handle]let options = newValue.options//保存逻辑层的方法名称this.callback = newValue.callbackif (!options) {options = undefined}if (!handle) {console.info("参数为标记需要执行的方法")return}handle(options, newValue?.rendCallback)},init(options, fn) {console.log("视图层接受到数据了")// 回调fn("11")},viewInit() {console.log("视图层向逻辑层发送数据-------------------------------------------")this.$ownerInstance.callMethod("handleItemClick", {callback: "handleFeaturePopup",param: {name: "李四",age:11,},})},luojiFn(){console.log("this.callback:",this.callback);this.$ownerInstance.callMethod("handleItemClick", {callback: this.callback,param: {name: "李四11",age:11,},})}},
}
</script>
<style lang="scss" scoped></style>