目录
组件传值: 通过使用逻辑层方法，传递数据,涉及到数据赋值和生命周期等问题
什么renderjs
- 在renderjs下，?可以引用jquery,esri-loader等web api（在uniapp项目下,若不使用renderjs，这种api以及document,window是方法是不支持的）。
- 可以直接操作dom，例:document.getElementbyId().οnclick=()=>{ }。
- 动画更流畅，性能更高。
与一般vue使用上的区别
- renderjs 分为 视图层 与 逻辑层
- 视图层即使用lang="renderjs"的<script>，
- 逻辑层就是普通的<script>标签。
- 页面渲染、使用props传值只能用逻辑层的数据，就是组件 view 传值要用下面的逻辑层。
- 按钮的监听分两种：
- 逻辑层：通过html标签，定义点击事件
- 视图层：通过document操纵dom元素
- 逻辑层：通过html标签，定义点击事件
组件传值: 通过使用逻辑层方法，传递数据,涉及到数据赋值和生命周期等问题
HTML
<template>
<view class="content">
<!-- <button @click="sendMsg">点击</button> -->
<view @click="onViewClick"><button>{{text}}</button></view>
<test :view="view" :map="map" :layer="layer" v-if="begin"></test>
</view>
</template>
视图层：
<script module="echarts" lang="renderjs">
let myChart
import {loadModules} from '../../static/esri-loader.js';
export default {
view:null,
map:null,
layer:null,
data() {
return {
ready:false,
text:"视图层",
},
mounted() {
this.initEcharts()
},
methods: {
initEcharts() {
let options = {
url: 'https://js.arcgis.com/4.20/init.js',
css: 'https://js.arcgis.com/4.20/esri/themes/light/main.css',
};
loadModules(["esri/views/MapView",
"esri/Map", "esri/layers/MapImageLayer","esri/tasks/support/FindParameters",
"esri/tasks/FindTask",
], options).then(([MapView, Map, MapImageLayer,FindParameters,FindTask]) => {
// console.log(sublayers)
const sublayers=[ ];
for(let i=17;i>=0;i--){
let sub={ }
sub.id=i
sub.visible=true
sublayers.push(sub);
i<15?sub.popupTemplate=this.popupPoint:sub.popupTemplate=this.popupLine;
}
this.layer = new MapImageLayer({
url: "https://47.97.192.155:6443/arcgis/rest/services/XSTestDemo/MapServer",
sublayers: sublayers
});
this.map = new Map({
layers: [this.layer],
basemap: "streets",
});
this.view = new MapView({
container: "viewDiv",
map: this.map,
zoom:5,
center:[120,0]
}); //显示地图
//关键，类似监听的作用
//通过使用逻辑层方法，传递数据
this.$ownerInstance.callMethod('sendMsg')
});
}
}
}
</script>逻辑层：
<script>
export default {
data() {
return {
begin:false
}
},
onLoad() {
},
watch:{
},
mounted() {
},
methods: {
sendMsg(){
//开始渲染
this.begin=true
}
},
}
</script>test组件
<template>
<view>
</view>
</template>
<script>
export default {
props:['view','map','layer'],
name:"test",
data() {
return {
};
},
mounted() {
console.log('---这是view')
console.log(this.view)
console.log(this.layer)
console.log(this.map)
}
}
</script>
<style>
</style>
?关于调试问题
? ? ? ? 不一定都要用真机模拟器，只要了解并按照renderjs的语法规则，可直接使用浏览器调试。
?关于各层数据传递问题：
? ? ? ? 原则上两层的数据都是渲染在一个this里面的，只是涉及到生命周期问题，可通过点击事件等拿到值
- 视图层可以通过this.xxx拿到逻辑层的数据
- 逻辑层不能直接通过thiis.xxx拿到视图层数据（就是要绕弯拿）。
<template>
<view>
<text>renderjs区域</text>
<view @click="renderScript.emitData" :msg="msg" :change:msg="renderScript.receiveMsg" class="renderjs" id="renderjs-view">
</view>
<button @click="changeMsg" class="app-view">app-view</button>
</view>
</template>
<script>
export default {
data() {
return {
msg: ''
};
},
methods: {
// 触发逻辑层出入renderjs数据改变
changeMsg() {
this.msg = 'hello renderjs' + Math.random() * 10;
},
// 接收renderjs发回的数据
receiveRenderData(val) {
console.log('receiveRenderData-->', val);
}
}
};
</script>
<script module="renderScript" 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) {
ownerVm.callMethod('receiveRenderData', this.name)
}
}
};
</script>