v2.0 组件通信的总结

在vue.js现在比较流行，层出不穷的js框架越来越强调数据绑定，组件化开发。

正在给公司做一个管理后台，基本思路是编写几个通用组件，采用单页面应用的形式完成；

结构大致如下：

mainVue

　　leftMenu

　　commlist

　　modalView

其中3个字组件要相互通信并且和主vue实例通信，我在v1.0 实现方式是：

使用$emit向上传递事件，mainVue使用$on监听传递来的信息，然后父组件处理后使用$dispatch进行事件分发；其他需要进行交互的组件在设置监听方法；

这个方法在一个页面里有几个组件时还好处理，当组件数量越来越多的时候,尤其是到处充充斥着$emit/$dispatch，处理起来比较头疼。

这里就不贴vue1的代码了，因为这不是本次总结的重点；

---------------------------------------以下内容是本次个人总结重点------------------------------------------------------------------------------------------------

vue2.0废弃了一些方法，比如上文提到的$dispatch,这使得vue1的方法不能使用，要重写；

组件间的通信，在2.0里，官方文档给出了解决方案:采用一个事件管理中心和props的方法进行通讯；

实现效果如下： v2.0 组件通信的总结

index.html

<div class="container-fluid" id="father">
    <div class="container">
        <div class="row">
            <ul class="list-group">
                <li class="list-group-item list-group-item-success">父组件</li>
                <li class="list-group-item">您的姓名是：<b class="text-danger">{{name}}</b><br></li>
                <li class="list-group-item">您的年龄是：<b class="text-danger">{{births}}</b></li>
            </ul>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="panel panel-info">
                    <div class="panel-heading">子组件A</div>
                    <div class="panel-body">

                        <ybxs ref="names"></ybxs>

                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="panel panel-info">
                    <div class="panel-heading">子组件B</div>
                    <div class="panel-body">

                        <ybxs-brother ref="birth" :pname="name"></ybxs-brother>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
var father = new Vue({
    el:'#father',
    data:{
        name:'',
        births:''
    }
});
</script>

在components.js里使用$emit方法发送事件或信息，

let ybxs = Vue.component('ybxs',{
    template:'<div>请输入您的姓名：<br><input v-on:change="inputName()" type="text" v-model="userName"/></div>',
    data:function(){
        return {userName:''}
    },
    methods:{
        inputName:function(){
            let _this = this;
            eventCenter.$emit('nameChange',_this.userName);
        }
    }
});
let ybxsBrother = Vue.component('ybxsBrother',{
    template:'<div>请选择<b class="text-danger">{{pname}}</b>出生日期：{{selectYear}}<br><select v-model="selectYear" v-on:change="selectYears()"><option v-for="item in years" :value="item">{{item}}</option></select></div>',
    data:function(){
        return {selectYear:'',years:[1989,1990,1991,1992,1993,1994,1995,1996]}
    },
    props:['pname'],
    methods:{
        selectYears:function(){
            let _this = this;
            eventCenter.$emit('yearChange',_this.selectYear);
        }
    }
});

定义一个事件管理中心，用来处理组件间的事件及数据传递

//定义一个事件管理中心
let eventCenter = new Vue();
//处理名称事件
eventCenter.$on('nameChange',function(data){
    father.name = data;
});
//处理出生年份选择
eventCenter.$on('yearChange',function(data){
    father.births = data;
});

完整DEMO的Github地址是：https://github.com/HUA1/vue2.git

v2.0 组件通信的总结

相关推荐