vue组件之前的传值可以分为三类：
1，父传子
父传子的用法：
在子组件中需要用到父组件的值，需要在子组件中定义props选项，props:[‘字符串名1‘,‘字符串名2‘]，props中的数据和data中的数据用法一样，
使用子组件时,通过动态绑定自定义属性获取父组件的值例如：<component-a :字符串名1="父组件data中的数据" :字符串名2="父组件data中的数据"></component-a>
在子组件中使用数据，可以在template中用插值表达式使用{{字符串名1}}
2，子传父
首先 在子组件中有有一个数据data中定义 cont:100；
然后在子组件的methods中写一个方法fn1(),在这个方法中用创建一个自定义事件this.$emit(自定义事件名,this.cont)；
把这个自定义事件绑定在子组件的开始标签位置（父组件中使用子组件<child-a @自定义事件=‘父组件methods中的方法fn2‘）；
触发子组件中的fn1(),比如点击某一个按钮去触发
在父组件方法fn2中可以获得到 子组件的数据svg就是子组件cont的值 fn2(svg){ console.log(svg); this.data中的数据 = svg }
在父组件中可以用插值表达式来使用{{data中的接收了svg的数据}}
注意：这里讲的是传了一个数字，也可以传数组和对象，$emit自定义事件，是vue给我们提供的写法
3，兄弟组件之间的通信
情景：在父组件中有并列的两个子组件child-a和child-b
前置条件->js绑定+触发事件
绑定事件 this.$on(事件名,函数(接收的形参){})
触发事件 this.$emit(事件名,数据)
在child-a中：点击按钮触发方法->在方法中写触发事件vm.$emit(事件名,要传的数据)
在child-b中：绑定事件vm.$on(事件名,(接收的参数)=>{})
注意：在两个组件中，需要用共同的vm实例对象，传值才管用，所以这里可以单独写一个js文件
js文件中的代码： import Vue form ‘vue‘;
const vm = new Vue();
导出 export default vm;
在两个需要传值的组件中import引入这个文件 ： import vm from "./busevent.js";
原文地址：https://www.cnblogs.com/webjl/p/10301643.html