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”;
  54. export default {
  55.   data() {
  56.     return {
  57.       b_ak: ”, // 百度授权key 浏览器端
  58.     }
  59.   },
  60.   props: [‘control’],
  61.   watch: {
  62.     ‘control.location’: ‘location’
  63.   },
  64.   methods: {
  65.     location(val) {
  66.       if (val == ”) {
  67.         return false
  68.       }
  69.       this.lng = val.split(‘,’)[0];
  70.       this.lat = val.split(‘,’)[1];
  71.       this.init()
  72.     },
  73.     update() {
  74.       console.log(‘update’);
  75.     },
  76.     init() {
  77.       BaiduMap(this.b_ak).then(() => {
  78.         // 实例化地图
  79.         this.map = new BMap.Map(‘map’);
  80.         // 初始化地图,设置中心点坐标和地图级别
  81.         this.map.centerAndZoom(
  82.           new BMap.Point(this.lng, this.lat),
  83.           15
  84.         );
  85.         //开启鼠标滚轮缩放
  86.         this.map.enableScrollWheelZoom(true);
  88.         // 向父组件传参
  89.         UniViewJSBridge.publishHandler(‘onWxsInvokeCallMethod’, {
  90.           cid: this._$id,
  91.           method: ‘renderjsCall’,
  92.           args: {
  93.             type: ‘1’,
  94.             name: ‘2’
  95.           }
  96.         })
  97.       });
  98.     }
  99.   }
  100. }
  101. </script>
  103. <style lang=“scss” scoped>
  104. .map-container {
  105.   width: 100%;
  106.   height: 100%;
  107. }
  109. #map {
  110.   width: 100%;
  111.   height: 100%;
  112. }
  113. </style>

发表回复

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