vue中非父子组件的传值

最新推荐文章于 2022-06-28 20:02:30 发布

原创最新推荐文章于 2022-06-28 20:02:30 发布 · 188 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.bus #兄弟组件传值

博客介绍了利用Vue进行兄弟组件数据传递的两种方法，一是利用Vue的bus，需先给Vue添加bus，在发送数据组件添加相关操作，接收组件添加接收函数；二是利用Vuex进行数据传递，但未详细展开。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1：利用vue的bus来进行数据传递。

2：利用vue的vuex来进行数据传递。

我们先来说第一个方法。

我们先给vue添加bus

vue.prototype.bus=new Vue();//创建一个vue实例

在需要发送数据的组件添加

this.bus.$emit('addData',"向兄弟组件传值")
//其中第一个参数是自定义事件名，第二个是需要传递的数据。
一般写法如下：
methods：{
    clickFun(){
     //点击事件（点击后触发当前事件然后发送数值到其他组件接收）
    this.bus.$emit('addData',"向兄弟组件传值")
    }
}

当数据传递后，我们就需要在接收的组件添加接收函数

this.bus.$on('addData',(msg)=>{
//第一个参数是根据$emitd的自定义函数来写的，第二个是执行一个函数
        console.log(msg)
    }
)


一般写在
mounted (){
    var $this=this;  //在$on里面还有函数所以作用域发生了改变，this，需要先保存下来
    $this.bus.$on('addData',(msg)=>{
         console.log(msg)
        })
}