Vue2的vue-cli组件通信

一、父亲向儿子通信

这里是子组件自定义一个props ，子组件通过插值表达式插入到p标签，由于子组件并没有定义这个内容，props就是用来父组件向子组件传数据的，父组件在data(){}里面return子组件需要的数据，在<Son></Son>绑定传过来的msg和user并且把data里面的数据绑定好，这样就通过props完成了父子通信。

二、儿子向父亲通信

子组件定义一个methods，在里面定义一个add（）方法，add方法是每点击一次就加1，然后在data里面return返回每次增加数据。我们需要将子组件每次加1的变化传入到父组件，那么就要用到$emit。在子组件中写下this.$emit方法，修改数据时，可以通$emit（参数1，参数2)自定义触发自定义事件。里面有两个参数，参数1自定义事件的名称（这里相当于click ，我们常用到@click，那么这里的numchange就相当于@numchange，这个方法可以让你更好理解自定义事件就是相当于一个点击事件）。参数2是返回给父组件的数据。那么我们中父组件也定义一个data返回数据，methods里面定义一个方法来接收子组件的数据，父组件<Son></Son>绑定这个自定义事件，通过methods调用这个方法，方法里面可以自定义一个参数来接收子组件传过来的数据，名字随意。这里如果不明白this，你可以去打印一下。

三、兄弟通信

兄弟通信我们是用EventBus 和$emit来传数据。这次我们是组件A发送数据到组件C。
首先我们得先写一个EventBus.js ，在里面导入一个Vue，其实就是一个vue实例。然后分别在A组件和C组件都导入这个EventBus.js名字可以定为bus，兄弟通信就是通过这个EventBus.js来当作过度桥梁。在子组件定义一个data来return一个msg数据，这个msg就是C组件需要A组件传过来的内容。再在子组件定义一个methods来定义一个发送数据的sendMsg的方法，里面通过bus.emit（参数1，参数2）来调用,参数1是一个自定义的事件名称，参数2是要发送的数据。组件C在data里吗返回等下要从A组件得到的数据从而return，由于我们需要用到created生命周期函数，created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。在created里面用bus.$on(参数1，val=>{}),参数1就是组件A定义的参数1share，取名字随意，但是要和A组件参数1保持一致，val今天函数就是发送过来的数据，名字也是随便取，把val的数据赋值给data里面return就行了，这里还是建议打印this去看看里面的参数