在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的方法进行通讯;

实现效果如下:

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 组件通信的总结的更多相关文章

  1. vue2.0组件通信各种情况总结与实例分析

    Props在vue组件中各种角色总结 在Vue中组件是实现模块化开发的主要内容,而组件的通信更是vue数据驱动的灵魂,现就四种主要情况总结如下: 使用props传递数据---组件内部 //html & ...

  2. vue29-vue2.0组件通信_recv

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. vue2.0 组件通信

    组件通信: 子组件要想拿到父组件数据 props 子组件不允许直接给父级的数据, 赋值操作如果想更改,父组件每次穿一个对象给子组件, 对象之间引用. 例子: <script> window ...

  4. vue2.0组件通信小总结

    1.父组件->子组件 父组件 <parent> <child :child-msg="msg"></child>//这里必须要用 - 代替 ...

  5. 通信vue2.0组件

    vue2.0组件通信各种情况总结与实例分析   Props在vue组件中各种角色总结 在Vue中组件是实现模块化开发的主要内容,而组件的通信更是vue数据驱动的灵魂,现就四种主要情况总结如下: 使用p ...

  6. vue2.0父子组件通信的方法

    vue2.0组件通信方法:props传值和emit监听.(.sync方法已经移除.详情请点击)(dispatch-和-broadcast方法也已经废弃) props方法传值:Props 现在只能单项传 ...

  7. vue2.0 父子组件通信 兄弟组件通信

    父组件是通过props属性给子组件通信的来看下代码: 父组件: <parent> <child :child-com="content"></chil ...

  8. Vue2.0组件之间通信(转载)

    Vue中组件这个特性让不少前端er非常喜欢,我自己也是其中之一,它让前端的组件式开发更加合理和简单.笔者之前有写过一篇Vue2.0子父组件通信,这次我们就来聊一聊平级组件之间的通信. 首先我们先搭好开 ...

  9. vue2.0 $emit $on组件通信

    在vue1.0中父子组件通信使用$dispatch 和 $broadcast,但是在vue2.0中$dispatch 和 $broadcast 已经被弃用. 因为基于组件树结构的事件流方式实在是让人难 ...

随机推荐

  1. 【转】jstack简单使用

    转载记录下, 转载自https://www.cnblogs.com/chenpi/p/5377445.html 当我们运行java程序时,发现程序不动,但又不知道是哪里出问题时,可以使用JDK自带的j ...

  2. python函数回顾:setattr()

    描述 setattr 函数对应函数 getatt(),用于设置属性值,该属性必须存在. 语法 setattr 语法: setattr(object, name, value) 参数 object -- ...

  3. nginx反向代理三台web

    1.首先我们需要在服务器中三个不同名字,并将他们赋值 2.切换到nginx—conf  把三台机器的nginx的配置文件分别命名为web1.conf.web2.conf.web3.conf vim的赋 ...

  4. 非Linux环境下调用sh命令

    方法一:把cygwin的bin配置到环境变量里,这样做了以后在cmd.exe里也可以使用linux的命令 def exe_command(command): p = subprocess.Popen( ...

  5. LDA(Latent Dirichlet allocation)主题模型

    LDA是一种典型的词袋模型,即它认为一篇文档是由一组词构成的一个集合,词与词之间没有顺序以及先后的关系.一篇文档可以包含多个主题,文档中每一个词都由其中的一个主题生成. 它是一种主题模型,它可以将文档 ...

  6. 阿里云centos+java环境搭建

    目录 .准备 .安装jdk .安装tomcat .安装mysql 1.准备 购买阿里云服务器,我买的是Centos 6.5. 因为是linux,在window下管理我使用XManager,这个软件可以 ...

  7. LeetCode:二叉树的锯齿形层次遍历【103】

    LeetCode:二叉树的锯齿形层次遍历[103] 题目描述 给定一个二叉树,返回其节点值的锯齿形层次遍历.(即先从左往右,再从右往左进行下一层遍历,以此类推,层与层之间交替进行). 例如:给定二叉树 ...

  8. 流量分析系统--zookeeper集群部署

    安装zookeeper mkdir apps tar -zxvf zookeeper-3.4.5.tar.gz -C apps [root@mini1 zookeeper-3.4.5]# rm -rf ...

  9. SQL语句 自连表查询。inner join用法,partition by ,列转行查询

    use mydb1 go -- 表T_Employee2 -- Id Name Position Dept -- 1 张三 员工 市场部 -- 2 李四 经理 销售部 -- 3 王五 经理 市场部 - ...

  10. linux中环境变量的用法

    Linux操作系统下三种配置环境变量的方法[转] 在linux下做开发首先就是需要配置环境变量,下面以配置java环境变量为例介绍三种配置环境变量的方法. 1.修改/etc/profile文件 如果你 ...