uniapp 使用RenderJs

在uniapp中renderjs可以使用原生js的dom，方便很多。下面熟悉一下renderjs基础使用。

模版

<template>
    <view class="renderWrap">
        <view>
            <button type="primary" @click="renderJS.sendData">视图层 发送数据到 逻辑层</button>
            
            <button type="warn" @click="changeMsg">逻辑层 修改 msg 值</button>
            
            <button type="primary" @click="renderJS.renderMsg">视图层 修改 逻辑层值</button>

            <view  :msg="msg" :change:msg="renderJS.receiveMsg">
                {{msg}}
            </view>
        </view>
    </view>
</template>

基础vue的script

<script>
    export default {
        data() {
            return {
                msg: '看看Model层的msg'
            }
        },
        methods: {
            // renderjs 接收数据
            changeMsg() {
                this.msg = "修改 msg 值，执行 receiveMsg 方法";
            },
            // 接收 renderjs 发送的数据
            receiveSendData(val) {
                this.msg = `Model 接收 View层 值：${val}`;
            }   
        }
    }
</script>

创建renderjs的module

<script module="renderJS" lang="renderjs">
    export default {
        data() {
            return {
                name: '我是renderjs module!',
                message: ''
            }
        },
        methods: {
            // 接收 逻辑层发送的数据
            receiveMsg(newValue, oldValue, ownerVm, vm) {
                console.log('监听 msg 值：', newValue, oldValue)
            },
            // 发送数据到 逻辑层
            sendData(e, ownerVm) {
                ownerVm.callMethod('receiveSendData', this.name)
            }
        }
    }
</script>