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

╰半橙微兮° 2022-11-25 04:20 92阅读 0赞

我们在使用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、父子传参 ##

**父组件代码**

**子2组件代码**  
**bar.vue**

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

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