vue baidumap父组件传给子组件

原本代码

非子父组件的形式，代码如下

<template>
	  <baidu-map class="bm-view" :center="center" :zoom="zoom" @ready="handler" :scroll-wheel-zoom="true">
	<bm-marker :position="markerPoint" :dragging="true" @click="infoWindowOpen"  :icon="{url: 'http://developer.baidu.com/map/jsdemo/img/fox.gif', size: {width: 300, height: 157}}">
	 <bm-info-window :show="show" @close="infoWindowClose" @open="infoWindowOpen">我爱北京天安门</bm-info-window>
	 </bm-marker>
	</baidu-map>
	</template>
	<script>
	export default {
	  data () {
	    return {
	      center: {lng: 0, lat: 0},
	      zoom: 15,
		  markerPoint:{lng: 116.404, lat: 39.915},
		  show:false
	    }
	  }
	}
	</script>

下面我们进行vue 组件的改造，建立components文件，新建Marker.vue。用来放置标记。

子组件 （Marker.vue）

管理标记事项。定义三个参数用来接受父组件的传值，分别标记点 markerPoint，是否支持拖拽bool，图标icon

<template>	
<bm-marker :position="markerPoint" :dragging="bool" :icon="icon">
</bm-marker>		 
</template>

<script>
export default {
  props: ['markerPoint','bool','icon'],
  data() {
    return {
		
    }
  },
}
</script>

父组件 （Marker.vue）

呈现地图标记。定义三个参数双向绑定用来传值给子组件

<template>
	  <baidu-map class="bm-view" :center="center" :zoom="zoom" @ready="handler" :scroll-wheel-zoom="true">
	  <v-marker  :markerPoint="markerPoint1" :bool="bool1" :icon="icon1">
	 </v-marker>
	</baidu-map>
	</template>
	<script>
		import Marker from './components/Marker.vue'
	
	export default {
		components:{'v-marker':Marker},
	  data () {
	    return {
	      center:{lng: 0, lat: 0},
	      zoom:15,
		  markerPoint1:{lng: 116.404, lat: 39.915},
		  icon1:{url: 'http://developer.baidu.com/map/jsdemo/img/fox.gif', size: {width: 300, height: 157}},
		  bool1:true,
		  show:false
	    }
	  }

	}
	</script>