unibest icon indicating copy to clipboard operation
unibest copied to clipboard

hbx模板不能使用官方的renderjs

Open LeeYuze opened this issue 5 months ago • 1 comments

Bug report(问题描述)

pnpm create unibest my-project -t hbx-base # hbx的base模板,使用这个命令生成的模板,不能用官方的renderjs

hb编辑器控制台报错,TypeError: e.undefined is not a function,我用hb创建的空白模板实现了下面的代码,没有问题,只有咱们的unibest模板不行

Steps to reproduce(问题复现步骤)

<!-- 使用 type="home" 属性设置首页,其他页面不需要设置,默认为page;推荐使用json5,更强大,且允许注释 -->
<route lang="json5" type="home">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '首页',
  },
}
</route>

<template>
  <view class="renderWrap">
    <view>
      <button type="primary" @click="renderJS.sendData">视图层 发送数据到 逻辑层1</button>

      <button class="margin-top-md margin-bottom-md" type="warn" @click="changeMsg">
        逻辑层 修改 msg 值
      </button>

      <button type="primary" @click="renderJS.renderMsg">视图层 修改 逻辑层值</button>

      <view
        class="margin-top-md margin-bottom-md text-center"
        :msg="msg"
        :change:msg="renderJS.receiveMsg"
      >
        {{ msg }}
      </view>
    </view>
  </view>
</template>

<script module="renderJS" lang="renderjs">
export default {
	data() {
		return {
			name: '我是renderjs module!',
			message: ''
		}
	},
	methods: {
		renderMsg(event, ownerInstance) {
			// 调用 Model 层的 renderClick方法,进行传值
			ownerInstance.callMethod('renderClick', {
				value: 'renderjs 向 Model 层传递数据,并修改了 msg 值'
			})
		},
		// 接收 逻辑层发送的数据
		receiveMsg(newValue, oldValue, ownerVm, vm) {
			console.log('监听 msg 值:', newValue, oldValue)
		},
		// 发送数据到 逻辑层
		sendData(e, ownerVm) {
			ownerVm.callMethod('receiveRenderSendData', this.name)
		}
	}
}
</script>

<script>
export default {
  data() {
    return {
      msg: '我是Model层的msg',
    }
  },
  methods: {
    // 触发逻辑层,renderjs 接收数据
    changeMsg() {
      this.msg = '修改 msg 值,并执行 receiveMsg 方法'
    },
    // 接收 renderjs 发送的数据
    receiveRenderSendData(val) {
      this.msg = `Model 接收 View层 值:${val}`
    },
    //接收 renderjs 传递数据
    renderClick(e) {
      this.msg = e.value
    },
  },
}
</script>

minimal reproduction(最小可还原代码)

新建模板,复制上面的代码直接替换index.vue就行,然后编译运行

LeeYuze avatar Aug 27 '24 14:08 LeeYuze