diskpart删除450 MB的恢复分区

vue组件之间传值，包括：父子、子父、子子

1. 概述

实现需求：中国地图点击省份，显示相应省份的详细地图。

2. 设计架构

index是中国地图和省份地图的父组件，控制地图的显示位置。
中国地图和省份地图进行地图的描画和详细信息。

数据传递：

1. 中国地图单击事件获取省份信息。

2. 将省份信息传递给父组件。(子父)

3. 父组件将省份信息传递给省份地图。(父子)

4. 省份地图获取到信息之后进行相应省份的描画。

整个过程是(子子)之间传递数据。

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()
    }
  },
}

5. 效果

CS-IoTCloud 物联网云平台

---

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 wind.kaisa@gmail.com