Vue子父组件——父组件传值子组件
原本代码
非子父组件的形式,代码如下
<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>