vue组件传值

  1. 1. 概述
  2. 2. 设计架构
  3. 3. 子父
  4. 4. 父子
  5. 5. 效果

vue组件之间传值,包括:父子、子父、子子

1. 概述

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

2. 设计架构

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

pic

数据传递:

  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

文章标题:vue组件传值

本文作者:kaisawind

发布时间:2019-03-28, 07:26:42

最后更新:2020-11-18, 15:55:44

原始链接:https://kaisawind.gitee.io/2019/03/27/2019-03-28-vue/

版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

目录
×

喜欢就点赞,疼爱就打赏