vue之间组件的通信

在vuejs里面组件间的通信有如下几类:

  • 父子通信(一级嵌套)
  • 子父通信(一级嵌套)
  • 爷孙通信 (属性传递)
  • 孙爷
  • 兄弟通信(公共的父级)
  • 叔侄通信

父子(父到子,子到父)

可参考我之前写过的
https://www.jianshu.com/p/2f236e7a6be6

爷父子之间传递

值得注意的是,由于数据是单向数据流,所以只能从
爷组件===>(属性传递)父组件
父组件===>(属性传递)子组件
子组件===》(事件传递)父组件
父组件===》(事件传递)爷组件

以下要注意:

  • 爷爷,爸爸私有变量应该在自己对象中定义data,而不是在实例化的vue共享的data里面。在自己定义对象中的data,一定是以函数形式,并且返回的是对象。
  • 假设爷爷要把私有属性给粑粑,就要在爷爷的template的特征描述那里,定义爸爸标签时候绑定一个值
template:`

爷爷组件私有{{yeyemoney}}

`

比如这个在father标签:yeyeMon绑定了这个,相当于给粑粑一个yeyeMon账户,里面放着yeyemoney这个私有属性,而粑粑实例那里就要注册这个账户

 props:['yeyeMon'],

就可以拿到爷爷的私有变量了。

  • 假设爸爸要给爷爷发送消息,那就要通过事件触发了。就要在爸爸实例那里的template添加一个摁扭,绑定一个函数

同时爸爸还会自定义一个函数fatherTokenyeye,

 fatherTokenyeye:function () {
                    this.$emit('listenFather','爷爷你好啊我是爸爸')
                }

这个函数会分发一个监听器listenFather给爷爷,同时将想要表达的话发送过去。
爷爷事先就要在爸爸子标签订阅这个监听器


然后通过handlefather函数处理所穿过来的消息,显示在自己组件上。

  data:function(){
                    return {
                        yeyemoney:1000000000,
                        fatherMessage:''
                    }
                },
                methods:{
                    handlefather:function (data) {
                        this.fatherMessage=data
                    }
                },

爷爷最后将data渲染到页面就好了

template:`

爷爷组件私有{{yeyemoney}} 来自爸爸的问候:{{fatherMessage}}

`

兄弟通信

这里可以用eventBus空的vue实例对象。

var EventBus = new Vue();

注册好两个兄弟组件


    var vm = new Vue({
        el: '#box',
        components: {
            bigBrother,
            littleBrother,

        }
    });

在box实例化vue管辖位置调用两个兄弟组件

具体书写两个属性的组件特征,首先是小弟与大哥通信

var littleBrother = {
   methods: {
            clickHandler: function () {
                EventBus.$emit('getmessagefromlittlebrother', '大锅,你好!');
            }
        },
        template: `
            

小弟

` }

此时添加一个摁扭,绑定一个点击事件
clickHandler,在clickHandler里通过总线EventBus来分发$emit一个监听器,这个监听器叫getmessagefromlittlebrother, 同时发送要和大哥组件通信的消息。
在另一个大哥组件中,就要订阅这个监听器,把收到的信息显示

var bigBrother = {
        data: function(){
          return {
              message: '',
          }

        },
        created: function(){
          // 组件一加载的时候,大哥开始监听 $on(参数1监听事件的名称,用户自定义,参数2:回调函数,回调函数里面的data参数,就是触发这件事情的时候,传递的参数)
            EventBus.$on('getmessagefromlittlebrother', (data) => {
                console.log(data);
                this.message = data;
            });
        },
        methods: {
            clickHandler: function () {
                // 触发小弟监听的事件
                EventBus.$emit('getmessagefrombigbrother', '吃了吗?');
            }
        },
        template: `
            

大哥

来自小弟的问候:{{ message }}

` }

通过总线EventBus来订阅$on这个getmessagefromlittlebrother监听器,并且初始化data以后,监听器也会传过来小弟组件发送过来的信息。

值得注意的是,这里的订阅信息,要用到生命周期函数created,已加载完就要监听。

同理大哥要向小弟传递信息也是如此


你可能感兴趣的:(vue之间组件的通信)