javascript
复制代码
<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.callback
if (!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>