vue组件通信

作者: glory_前端 | 来源:发表于2017-10-22 19:48 被阅读0次

vue组件之间通信
【Vue】组件通信（任意通信）
vue 组件通信方式，父子、隔代、兄弟三类通信，六种方法
Vue相关知识点
Vue如何实现组件通信？
VUE组件（传值，生命周期）
Vue组件通信
vue组件间通信的一些实用方法（VUE2.x）
vue组件通信（传值）
Vue组件通信

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

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

父组件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="app">
            <alert msg="这是一个弹框"></alert> //调用子组件alert，并传值
        </div>
        
        <script src="lib/vue.js"></script>
        <script src="js/main.js"></script>
    </body>
</html>

子组件

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

})

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

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

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

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

})



//子组件
Vue.component('show',{
    template:'<button @click="onclick()">显示余额</button>',

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

})



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

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

//主页面
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="app">
            <!--平行组件之间通讯-->
            <huahua></huahua>
            <shuandan></shuandan>
            
        </div>
        
        <script src="lib/vue.js"></script>
        <script src="js/main.js"></script>
    </body>
</html>


//组件页面

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

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

})



//组件二

Vue.component('shuandan',{
    template:'<div>huahua说：{{huahua_said}}</div>',

    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