vue组件传值 - Thu, Mar 28, 2019
vue组件之间传值，包括：父子、子父、子子
1. 概述
实现需求：中国地图点击省份，显示相应省份的详细地图。
2. 设计架构
index是中国地图和省份地图的父组件，控制地图的显示位置。 中国地图和省份地图进行地图的描画和详细信息。
数据传递：
中国地图单击事件获取省份信息。
将省份信息传递给父组件。(子父)
父组件将省份信息传递给省份地图。(父子)
省份地图获取到信息之后进行相应省份的描画。
整个过程是(子子)之间传递数据。
3. 子父
子组件
export default {
methods: {
setProvince(province) {
this.$emit('province', province) // 向父组件发送province事件
},
initChart() {
this.chart = echarts.init(document.getElementById(this.id))
this.chart.on('click', (params) => {
this.setProvince(params.name)
})
}
}
}
父组件
<template>
<div>
<div class="china_map">
<ChinaMap id="ChinaMap" height="100%" width="100%" @province="getProvince"/>
</div>
</div>
</template>
父组件接受province事件，调用getProvince方法
export default {
name: 'Map',
components: { ChinaMap, ProvinceMap },
data() {
return {
province: '辽宁'
}
},
methods: {
getProvince(val) {
this.province = val
}
}
}
4. 父子
父组件
<template>
<div>
<div class="province_map">
<ProvinceMap id="ProvinceMap" :province="province" height="100%" width="100%"/>
</div>
</div>
</template>
将父组件的province赋值给子组件的属性
export default {
name: 'Map',
components: { ChinaMap, ProvinceMap },
data() {
return {
province: '辽宁'
}
},
methods: {
getProvince(val) {
this.province = val
}
}
}
子组件
子组件追加province属性，并监听province属性变化，变化后重新描画地图
export default {
props: {
province: {
type: String,
default: '辽宁'
}
},
watch: {
province: function(newProvince, oldProvince) {
console.log(newProvince, oldProvince)
console.log(this.option)
this.initMapData(newProvince)
this.option.geo.map = newProvince
this.option.series[0].data = this.convertData()
this.setChartOption()
}
},
}