vue组件传值的几种方式

1.父传子

首先在父组件中把要传的值msg绑定到子组件上,然后data中定义msg
vue组件传值的几种方式
在子组件中定义props用来接收即可
vue组件传值的几种方式
vue组件传值的几种方式

2.子传父

首先在子组件里通过点击button按钮,通过this.$emit(arg1,arg2) arg1:方法名字,arg2:要传出的值,传出一个方法名为toParent的方法接下来我们就要去父组件接收这个函数
vue组件传值的几种方式
此时进入到父组件,在子组件上定义了一个@toParent用来监听,此时子组件里面的button按钮被点击,就会触发getMsg这个方法,而父组件也获取到了子组件传来的值
vue组件传值的几种方式

3.事件总线

vue组件传值的几种方式
首先建立一个bus.js
vue组件传值的几种方式
我们需要从page1组件往page2组件传递消息,所以在这两个组件中引入bus.js.
接着在发送消息方(这里指page1组件)中,定义方法
vue组件传值的几种方式
接着在page2组件中(即接收方) ,有点儿类似于父子组件传值的方式
vue组件传值的几种方式
点击按钮
vue组件传值的几种方式