我们在使用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'//导入柱状图子组件文件，并指名为zpTopimport allInfoMap from '../viewparts/map'//导入地图子组件文件，并指名为allInfoMapexport 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);//地图点击传递到父组件的地区，变化之后由父组件传递到子组件}
},
这样通过子组件向父组件传参，父组件再向子组件传参实现了兄弟组件之间的参数传递