vue组件通信

1.组建通讯---父子组件通讯

父子通信通过props属性进行传值

父组件

    
        
        
    
    
        

             //调用子组件alert，并传值
        
        
        
        
    

子组件

Vue.component('alert',{
    template:'弹弹',
    props:['msg'], //接收父组件传值
    methods:{
        onclick:function(){
            alert(this.msg);
        }
    }

})

var app=new Vue({
    el:"#app"
})

1.组建通讯---子父组件通讯

子组件对上级组件的喊话，案例显示余额系统，子组件是一个显示余额的按钮，当点击这个按钮，子组件和上级组件进行通信，告诉父组件要显示余额。

//父组件
Vue.component('balance',{
    template:'
你的余貳:98
',
    methods:{
        showbalance:function(data){
            this.show=!this.show;
            console.log(data.a)
        }
    },
    data:function(){
        return{
            show:false
        }
    }

})



//子组件
Vue.component('show',{
    template:'显示余额',

    methods:{
        onclick:function(){
            this.$emit('show-balance',{a:1,b:2})//触发一个事件
        }
    }

})



var app=new Vue({
    el:"#app"
})

1.组建通讯---任意及平行组件之间的通讯

//主页面


    
        
        
    
    
        

            
            
            
            
        
        
        
        
    



//组件页面

var Event=new Vue();//定义一个事件调度器

//组件一
Vue.component('huahua',{
    template:'
我说：{{i_said}}
',
    data:function(){
        return{
            i_said:""
        }
    },
    methods:{
            on_change:function(){
                Event.$emit('huahua_said_some',this.i_said)//第一个参数触发事件的名字，第二个参数传的数据
            }
        
    }
    

})



//组件二

Vue.component('shuandan',{
    template:'
huahua说：{{huahua_said}}
',

    data:function(){
        return {
            huahua_said:""
        }
    },
    
    methods:{
    
    },
    mounted:function(){
        var vm=this;//事先声明域
        Event.$on('huahua_said_some',function(data){
            vm.huahua_said=data;//这里的this指的是Event的域，记住要事先声明
        });
    }

});



var app=new Vue({
    el:"#app"
})

截图

Paste_Image.png