uniapp 父组件与 renderjs 子组件通信

父组件向子组件通信

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

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

子组件向子组件通信

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

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

示例

<template>
  <view class="map-container">
    <view id="map" :prop="control" :change:prop="map.update" @click="map.click"></view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      b_ak: '', // 百度授权key 浏览器端
      control: {
        location: ''
      }
    };
  },
  methods: {
    // 获取当前位置
    getLocation() {
      uni.getLocation({
        type: 'gcj02',
        altitude: true,
        success: (res) => {
          let location = res.longitude + ',' + res.latitude;
          uni.request({
            url: `http://api.map.baidu.com/geoconv/v1/?coords=${location}&from=3&to=5&ak=${this.ak}`,
            success: (res) => {
              this.control.location =
                res.data.result[0].x + ',' + res.data.result[0].y;
            }
          });
        }
      });
    },
    renderjsCall(options) {
      console.log('renderjsCall回调');
      console.log(options);
    }
  },
  mounted() {
    this.getLocation();
  }
};
</script>
<script module="map" lang="renderjs">
import {
  BaiduMap
} from "@/utils/BaiduMap.js";
export default {
  data() {
    return {
      b_ak: '', // 百度授权key 浏览器端
    }
  },
  props: ['control'],
  watch: {
    'control.location': 'location'
  },
  methods: {
    location(val) {
      if (val == ") {
        return false
      }
      this.lng = val.split(',')[0];
      this.lat = val.split(',')[1];
      this.init()
    },
    update() {
      console.log('update');
    },
    init() {
      BaiduMap(this.b_ak).then(() => {
        // 实例化地图
        this.map = new BMap.Map('map');
        // 初始化地图,设置中心点坐标和地图级别
        this.map.centerAndZoom(
          new BMap.Point(this.lng, this.lat),
          15
        );
        //开启鼠标滚轮缩放
        this.map.enableScrollWheelZoom(true);
        // 向父组件传参
        UniViewJSBridge.publishHandler('onWxsInvokeCallMethod', {
          cid: this._$id,
          method: 'renderjsCall',
          args: {
            type: '1',
            name: '2'
          }
        })
      });
    }
  }
}
</script>
<style lang="scss" scoped>
.map-container {
  width: 100%;
  height: 100%;
}
#map {
  width: 100%;
  height: 100%;
}
</style>