一, 子向父传值
子页面: this.$emit('方法名', 需要传的数据), 我的方法名是 getMapData
eg:this.$emit('getMapData',data)
父页面:<echartsMap @getMapData="getMapData"></echartsMap>
在 methods 内写 getMapData 方法, 接收到的参数就是传过来的参数
- eg:getMapData(datamsg) {
- console.log(datamsg);
- }
.. 补充父页面调用子页面的方法:
在父页面引用子组件上加上 ref='属性名',this.$refs. 属性名. 子 页面的方法名 (), 也可以使用这种方式向子页面传值
二, 父页面向子页面传值, 子页面通过 props 接收
在需要接收参数的组件上 : 名称 ='values', 在 data 内定义一个类型, 然后在子页面的 props 接收参数
- 1,<mapCompones :newData="newData" ref="info"></mapCompones>
- 2,data() {
- return {
- newData:'传递参数'
- }
- }
3, 子页面: props:['newData']
页面内:{{newData}}
三, 兄弟组件传值可以用一, 二 2 个, 先向父传递, 再由父向子传递, 或者新建一个中央处理数据
来源: http://www.qdfuns.com/note/17726/a88902944f038c1f9266d5899a73d852.html