uni-app的renderjs示例 | app端使用window

原文：https://juejin.cn/post/6974552469917401125

<template>
  <view style="padding-top: 200rpx;">
    <!-- 这里的:change:msg 旨在于监听逻辑层的msg变化，有变化就调用renderjs内容 -->
    <!-- 这里要注意，render。receiveMsg中的render是下面renderjs定义的module名称 -->
    <view
      id="renderjs-view"
      style="padding-bottom: 100rpx;"
      :msg="msg"
      :change:msg="render.receiveMsg"
      class="renderjs"
      @click="render.emitData"
    />
    <button
      class="app-view"
      @click="changeMsg"
    >
      app-view
    </button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      msg: '',
    };
  },
  methods: {
    // 改变数据，触发renderjs
    changeMsg() {
      this.msg = `hello renderjs${Math.random() * 10}`;
      console.log(1111, this.msg);
    },
    // 接收renderjs传递的数据
    receiveRenderData(val) {
      console.log('receiveRenderData-->', val);
    },
  },
};
</script>

<script module="render" lang="renderjs">
    export default {
      data() {
        return {
          name: 'render-vm'
        }
      },
      mounted() {
        const view = document.getElementById('renderjs-view')
        const button = document.createElement('button')
        button.innerText = '一个按钮'
        view.appendChild(button)
      },
      methods: {
        // 接收逻辑层传递的数据
        receiveMsg(newValue, oldValue, ownerVm, vm) {
          console.log('newValue', newValue)
          console.log('oldValue', oldValue)
          console.log('ownerVm', ownerVm)
          console.log('vm', vm)
        },
        // 调用逻辑层的方法
        emitData(e, ownerVm) {
          console.log('receiveRenderData', e, ownerVm)
          ownerVm.callMethod('receiveRenderData', this.name)
        }
      }
    };
</script>