Vue组件之间数据传递之eventbus的使用方法

最新推荐文章于 2024-09-17 11:26:17 发布

独自灿烂吧

最新推荐文章于 2024-09-17 11:26:17 发布

阅读量845

点赞数

CC 4.0 BY-SA版权

文章标签： vue html js

本文链接：https://blog.youkuaiyun.com/weixin_44656392/article/details/105280836

本文介绍EventBus事件总线在Vue中的应用，实现非父子组件间通信，通过实例演示祖父组件直接向孙子组件发送数据的过程。

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

eventbus事件总线的方式,可以进行非父子组件之间的通信,除Vuex以为比较便利的一种组件之间数据通信的方式。

下面让我们来通过一个例子了解一下，是如何通过eventbus通信的（没有用vue-cli而是直接引入的vue.js）

跳过父组件,直接进行祖父和孙子组件之间通信

首先我们再html页面创建一个Vue实例为eventbus

 // eventbus是随意起的变量名
  var eventbus = new Vue();

接下来我们再创建一个vue实例为vm,我们再祖父组件中定义个点击方法handler,并通过Vue实例方emit发送事件名和需要传递的数据内容。(emit前一定要加$$这个是Vue中自带的事件,固定写法,不然会报错)

var vm = new Vue({
    el:'#app',
    methods:{
         handler(){
             eventbus.$emit('aaa','grandfather to grandson')
             //aaa 为事件名, grandfather to grandson是需要传递的内容
         }
     },
     components:{
         son
     }
 })

.在孙子组件中通过Vue实例中的$on来监听事件和接收到的数据,msg就是传递过来的数据,也是自己起的名字,你可以根据需求起名。
注意: 通常挂载监听是在vue生命周期的created或mounted中,具体情况还是看项目需求,这里不多赘述.

 mounted(){
     eventbus.$on('aaa',(msg)=>{
          console.log(msg)
     })
 }

下面看一下具体代码,这里的father组件只是进行演示,不通过father组件,grandson也能拿到grandfather中的值

<body>
    <div id="app">
        <son></son>
        <button @click="handler()">按钮</button>
    </div>
    <script>
        // eventbus是随意起的变量名
        var eventbus = new Vue();

        const grandson ={
            template:`
                <h2>hello world grandson</h2>
            `,
            mounted(){
                eventbus.$on('aaa',(msg)=>{
                    console.log(msg)
                })
            }
        }

        const father= {
            template:`
                <div>
                    <h1>hello world son</h1>
                    <grandson> </grandson>
                </div>
            `,
            components:{
                grandson
            }

        }

        var vm = new Vue({
            el:'#app',
            methods:{
                handler(){
                    eventbus.emit('aaa','grandfather to grandson')
                }
            },
            components:{
                father
            }
        })
    </script>
</body>