uniapp 父组件与 renderjs 子组件通信

renderjs 不能使用 uni.$on和 uni.$emit 通信。

父组件向子组件通信

使用 prop 传递数据,子组件监听数据变化

  1. <view id=“map” :prop=“control” :change:prop=“map.update”></view>

子组件向子组件通信

父组件创建回调函数,子组件特殊方法调用

  1. // 向父组件传参
  2. UniViewJSBridge.publishHandler(‘onWxsInvokeCallMethod’, {
  3.   cid: this._$id,
  4.   method: ‘renderjsCall’,
  5.   args: {
  6.     type: ‘1’,
  7.     name: ‘2’
  8.   }
  9. })

示例

  1. <template>
  2.   <view class=“map-container”>
  3.     <view
  4.       id=“map”
  5.       :prop=“control”
  6.       :change:prop=“map.update”
  7.       @click=“map.click”
  8.     ></view>
  9.   </view>
  10. </template>
  11. <script>
  12. export default {
  13.   data() {
  14.     return {
  15.       b_ak: // 百度授权key 浏览器端
  16.       control: {
  17.         location: 
  18.       }
  19.     };
  20.   },
  21.   methods: {
  22.     // 获取当前位置
  23.     getLocation() {
  24.       uni.getLocation({
  25.         type: ‘gcj02’,
  26.         altitude: true,
  27.         success: (res) => {
  28.           let location = res.longitude + ‘,’ + res.latitude;
  29.           uni.request({
  30.             url: `http://api.map.baidu.com/geoconv/v1/?coords=${location}&from=3&to=5&ak=${this.ak}`,
  31.             success: (res) => {
  32.               this.control.location =
  33.                 res.data.result[0].x + ‘,’ + res.data.result[0].y;
  34.             }
  35.           });
  36.         }
  37.       });
  38.     },
  39.     renderjsCall(options) {
  40.       console.log(‘renderjsCall回调’);
  41.       console.log(options);
  42.     }
  43.   },
  44.   mounted() {
  45.     this.getLocation();
  46.   }
  47. };
  48. </script>
  49. <script module=“map” lang=“renderjs”>
  50. import {
  51.   BaiduMap
  52. } from “@/utils/BaiduMap.js”;
  53. export default {
  54.   data() {
  55.     return {
  56.       b_ak: // 百度授权key 浏览器端
  57.     }
  58.   },
  59.   props: [‘control’],
  60.   watch: {
  61.     ‘control.location’: ‘location’
  62.   },
  63.   methods: {
  64.     location(val) {
  65.       if (val == ) {
  66.         return false
  67.       }
  68.       this.lng = val.split(‘,’)[0];
  69.       this.lat = val.split(‘,’)[1];
  70.       this.init()
  71.     },
  72.     update() {
  73.       console.log(‘update’);
  74.     },
  75.     init() {
  76.       BaiduMap(this.b_ak).then(() => {
  77.         // 实例化地图
  78.         this.map = new BMap.Map(‘map’);
  79.         // 初始化地图,设置中心点坐标和地图级别
  80.         this.map.centerAndZoom(
  81.           new BMap.Point(this.lng, this.lat),
  82.           15
  83.         );
  84.         //开启鼠标滚轮缩放
  85.         this.map.enableScrollWheelZoom(true);
  86.         // 向父组件传参
  87.         UniViewJSBridge.publishHandler(‘onWxsInvokeCallMethod’, {
  88.           cid: this._$id,
  89.           method: ‘renderjsCall’,
  90.           args: {
  91.             type: ‘1’,
  92.             name: ‘2’
  93.           }
  94.         })
  95.       });
  96.     }
  97.   }
  98. }
  99. </script>
  100. <style lang=“scss” scoped>
  101. .map-container {
  102.   width: 100%;
  103.   height: 100%;
  104. }
  105. #map {
  106.   width: 100%;
  107.   height: 100%;
  108. }
  109. </style>

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注