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.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>