vue兄弟组件通信

一.第一种方式是子组件先传值给父组件,然后再通过父组件传给另一个子组件

二.第一步:借助中央事件总线:在外部新建一个js文件,取名Bus.js,可放在assets文件夹目录下


第二步:两个组件作为子组件被同一个父组件所引用,在同一个页面显示。


第三步:两个兄弟组件之间的语法

组件1需要定义一个发送数据的方法,此处sendMsg是定义在此的方法,页面点击时候触发此函数,函数主体,通过Bus中央事件总线用$emit发送一个send事件,事件的功能就是传送一个this.a++的数据,区分sendMsg和send,前者是当前页面的点击事件,后者是发送出去,需要其他组件监听的事件。


组件2在组件2事先定义一个变量,在生命周期为created的时候,通过Bus中央事件总线用$on监听组件1中发送的send事件,用一个带参数的回调函数,接收穿过来的值,参数即为传的值 ,把值赋值给当前组件的变量。


三.第二种的简化版,省略了外部的js文件,直接把总线放在main.js里的vue实例中,写法如图


第二步:在使用的时候,不需要引入外部文件,只需要在Bus前加this.$root,即可调用。


你可能感兴趣的:(vue兄弟组件通信)