uniapp中使用renderjs,基础调用和data值渲染
<template>
<view>
<view class="message">{{message}}</view>
<!-- :message="message" :change:message="renderTest.messageChanged"
service层一旦message发生改变,会调用 renderjs中的messageChanged的方法
-->
<view @click="renderTest.onClick" :message="message" :change:message="renderTest.messageChanged" id="renderId"></view>
</view>
</template>
<script>
// service 层
export default {
data() {
return {
message: "这是service的测试message"
}
},
onLoad() {
plus.navigator.closeSplashscreen()
},
methods: {
onViewClick(options) {
console.log(options)
this.message = options.test
uni.showModal({
title: "数据传递",
content: options.test
})
},
getMessage(options){
console.log("测试renderjs调用此方法:"+JSON.stringify(options))
}
}
}
</script>
<style>
.message {
font-size: 22px;
margin-top: 80px;
}
</style>
<script module="renderTest" lang="renderjs">
export default {
data() {
return {
}
},
mounted() {
},
methods: {
// id 为 renderId的区域,点击触发的事件
onClick(event, ownerInstance) {
// 调用 service层的onViewClick方法,传值
ownerInstance.callMethod('onViewClick', {
test: '这是点击renderjs的区域,向service层传递变量'
})
},
messageChanged(newValue, oldValue, ownerVm, vm){
console.log("newValue*********"+newValue)
console.log("oldValue*********"+oldValue)
ownerVm.callMethod('getMessage',{
test: '123'
})
}
}
}
</script>
<style lang="scss" scoped>
#renderId {
width: 100%;
height: 2rem;
background-color: #00818A;
}
</style>