vue页面参数传递(VUE+echart+map联动实例)

我们在使用vue的时候经常会遇到页面参数传递，相比之前JavaScript操作，js入参传参，js之间方法调用只要我们引入js就可以相互调用，但是vue里面的不太一样，主要涉及有三种方式，父子传参，子父传参，兄弟传参

最近在做VUE+echart+map时候正好涉及到这三个传值，给大家分享一下

• 场景：Vue页面（地图和柱状图），点击地图区域，联动柱状图数据
• 解决思路：map.js触发点击事件，给父组件传值，父组件绑定bar子组件，bar子组件监听父组件值变化，对数据做相应变更
• 页面结构： 父页面：visual.vue； 子1-地图： map.vue ；地图初始化js：map.js；子2-柱状图：bar.vue
• 涉及点：$emit/props

1、子父传参

点击地图触发点击地图点击事件，将点击的地区作为参数，传到父页面。

子组件代码
vue中利用$emit实现子组件向父组件通信getSonData
map.vue

mounted() {
  this.getAllInfoMap();
},
methods: {
  getAllInfoMap () {
    this.cityName = this.name;
    this.$http({
      url: this.$http.adornUrl('emInfoOldinfo/getinfoAreaData?city=' + this.name),
      method: 'get'
    }).then((data) => {
      this.$nextTick(function () {
        let _this = this;//_this就是用来存储this指向的。
        loadMapFun('amap', jsJson, data.data.data.rows,_this);//调用地图初始化加载
      })
    }).catch(({
      error
    }) => {})
  }
}

map.js

  //地图添加点击事件
  myMapChart.setOption(option);
  myMapChart.on('click',function({data:d}){
     //Vue中利用$emit实现子组件向父组件通信getSonData
     _self.$emit("getSonData",d.name);
  });

父组件代码

<template>
  <div>
    <--@getSonData为指定数据绑定的函数，getCityName为父组件接收子组件传值过来的函数，用于接收数据-->
    <allInfoMap style="width:40%;height:95%;float:left;" @getSonData=getCityName></allInfoMap>
    <zpTop style="width:60%;float: left" :cityName="cityName"></zpTop>
  </div>
</template>
<script>
  import zpTop from '../viewparts/bar'//导入柱状图子组件文件，并指名为zpTop
  import allInfoMap from '../viewparts/map'//导入地图子组件文件，并指名为allInfoMap
  export default {
    data() {
      return {
        cityName: ''
      }
    },
    components: {
      zpTop,//在父组件中注册自子组件
      allInfoMap//在父组件中注册自子组件
    },
    methods: {
      getCityName(name) {
      	console.log(name);//name为子组件触发，传递过来的值
        this.cityName = name;
      }
    }

2、父子传参

父组件代码

<template>
  <div>
    <--@getSonData为指定数据绑定的函数，getCityName为父组件接收子组件传值过来的函数，用于接收数据-->
    <allInfoMap style="width:40%;height:95%;float:left;" @getSonData=getCityName></allInfoMap>
    <zpTop style="width:60%;float: left" :name="cityName"></zpTop>
  </div>
</template>

子2组件代码
bar.vue

props:['name'],//name是父组件中定义的，表明从父组件中获取到这个值
watch:{//监听事件变化，父组件中值变化就会传到子组件中
  name(v){
    console.log(v);//地图点击传递到父组件的地区，变化之后由父组件传递到子组件
  }
},

这样通过子组件向父组件传参，父组件再向子组件传参实现了兄弟组件之间的参数传递