Vue组件传值的三种方法

Vue组件传值的三种方式

1、父传子

父传子使用props：
1、父组件：即在使用的子组件标签上，自定义一个绑定数据，这里我使用的是“mymsg”，将父组件的msg绑定在其上。
2、子组件：在props属性中：声明一个“mymsg”，这个是和父组件在子组件标签上自定义的名称是一样的，type是数据类型，default是自身默认值
3、子组件：在需要用到的地方直接引用“mymsg”

结果为:

2、子传父

子传父：使用this.$emit('事件名',参数1,参数2,......)
过程：
	父组件：在子组件标签上自定义一个事件名，改事件名和emit的事件名一致，该事件绑定的是父组件在接收到数据时要触发的事件，其参数便是从子组件接收到是数据。

过程:
	子组件：例如要点击传值，那么首先绑定一个点击事件，在事件执行体内使用this.$emit('事件名',参数1,参数2,......)，改事件名同父组件自定义在子组件标签上的事件名

执行结果

3、组件与组件之间

组件之间，无论是不是父子组件，都可以使用事件总线来传递
首先在main.js中定义一个eventBus(随意名)的vue实例化对象

$emit是发送数据的一方，在发送数据对应的组件设置，可以是点击时触发
第一个参数是名称，后面的都是要传递的数据

$on是接收数据的一方，在接收数据对应的组件设置，这里例子实在mounted生命周期阶段接收，
第一个参数是名称，和发送时保持一致，第二个参数是个回调函数，其参数是接收的数据

总结：
父传子使用props
子传父使用$emit
组件之间使用事件总线，$emit发送，$on接收