vue之组件通信方式(兄弟组件)

今天回顾一下vue组件中兄弟组件如何实现通信

一、ref实现组件通信

//在兄弟组件之间的通信，可以采用关系链和ref链去使用，解决兄弟之间通信问题。

//html布局
    
 
            
        

        
    
    
    

//js代码
  Vue.component('big-brother', {
        template:"#big-brother",
        methods:{
            hitLittel(){
                //需要将弟弟的数据crying变成true
                // this.$parent.$children[1].crying = true    //通过关系链
                this.$parent.$refs.littel.crying = true       //通过关系链+ref链
            }
        }
    })
    Vue.component('littel-brother', {
        template: '#littel-brother',
        data(){
            return {
                crying:false
            }
        }
    })
    new Vue({
        el:"#app"
    })
注意点:在vue组件中,组件都可以通过关系链(this.$parent.$children[1],可以理解成js dom节点,操作父节点,兄弟节点)
		通过$ref也可以实现在父子组件通信

二、event-bus实现组件通信(事件总线又称万能方法)

//html布局
    

        
        

        
    
    
    
    

//js代码
    var angel = new Vue()
    Vue.component('big-brother', {
        template: '#big-brother',
        methods:{
            hitLittel(){
                //3.触发事件hit
                angel.$emit("hit")
            }
        }
    })
    Vue.component('littel-brother', {
        template: '#littel-brother',
        data(){
            return {
                crying:false
            }
        },
        methods:{
            changeCrying(){
                this.crying = true
            }
        },
        mounted(){ //生命周期钩子函数
            //2.绑定好事件
            angel.$on("hit",this.changeCrying)
        }
    })
    new Vue({
        el:"#app"
    })
注意点:这个方法的思路是将兄弟组件的方法先绑定在一个实例上,然后在在另一个兄弟组件上触发这个方法。
(可以这样理解:你哥哥给你规定你英语考试不能低于80分,低了他就要打你。然后你的英语老师想打你,但是她
不能直接动手,所以她就通知了你的哥哥,触发你哥哥要打你的事件,所以你挨打了。)