vue 不同组件如何进行通信?

我想实现的功能如下,
clipboard.png

点击左上角的menu按钮,从左侧滑出 菜单栏,如图,

clipboard.png

现在有三个组件,Home.vue, Head.vue, Sidebar.vue, 我怎么在 Home中点击 Head组件里的menu,去触发 SideBar的效果呢。

Home.vue
clipboard.png

Head.vue
clipboard.png

Sidebar.vue
clipboard.png

看官方文档需要用的 $emit,$on 在简单的场景下,可以使用一个空的 Vue 实例作为中央事件总线,这个不在同一页面中怎么去使用。。。 小白,有点懵逼。。

回答:

如果不想用一个空的Vue实例,可以使用this.$root.$emitthis.$root.$on试试。

回答:

event bus 可以解决
https://segmentfault.com/q/10…
当然,早点用 vuex 吧,能解决很多问题

回答:

大概分这样两种情况:

  1. 父子组件通信
    如在a中使用子组件b,可以使用自定义事件来完成:

        <b @myClick="handlerClick" />
    在b中使用`this.$emit('myClick')`去触发。 a中写好handlerClick对应去处理即可。
    
  2. 兄弟组件或者完全不相关的组件通信就需要使用一个你说的 中央事件总线去处理, 这个new Vue()写在一个单独的文件中作为公用的util方法
    如 a,b通信, 在a组件的生命周期函数里面去写对应的监听事件如在mounted处理:

    //a组件, Emitter就是另一个的 new Vue();
    mounted(){
        Emitter.$on('my-event', (data) => {
            //do something...
        })
    }
    
    //b组件 比如在某个元素点击后触发 my-event
    methods: {
        click: function(){
             Emitter.$emit('my-event', data); // data是要传递的数据
        }
    }

然后还有一种比较完美的方案, 在你页面数据结构稍微复杂的时候,可以使用vuex。 这样组件之间通信都不是问题, 在vuex store中的数据都是响应式的, 跟data数据里面的一样使用,一个组件变化了,另一个组件中的数据自然而然的跟着做响应了.

建议使用vuex,如果页面数据复杂的话。

vuex 官方文档:
https://vuex.vuejs.org/zh-cn/

回答:

  1. 这个得看一下情况。组件不多的话,事件监听和触发onemit就够用。

  2. 项目组件多而且比较复杂,那就得用vuex了。

回答:

请参考这里: http://uyi2.com/

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注