Vue组件之间通信的三种方式
最近在看梁颠编著的《Vue.js实战》一书，感觉颇有收获，特此记录一些比价实用的技巧。
组件是MVVM框架的核心设计思想，将各功能点组件化更利于我们在项目中复用，这类似于我们服务端面向对象三大特性之一的封装，将复杂的会被多次调用的代码封装成组件,在需要调用的地方注册使用即可。这样设计的前端代码方便移植，可以跨项目复用。
组件之间的关系分为父子组件兄弟组件和跨多级组件等等，在组件之间交互数据，进行通信主要通过三种方式来进行：
- 中央事件总线（非父子组件通信）
- 父链
- 子组件索引
下面让我们来好好说道说道这三种通信方式：
一.中央事件总线
这个东西名字叫的很唬人，但实际却是很好理解的一种通信方式，话不多说，我们来上代码。
<body>
<div id="app">
{{message}}
<tempcomponent-a></tempcomponent-a>
</div>
<script>
var middleware = new Vue(); Vue.component('tempcomponent-a', {
template: '<button @click="handleEvent">传递事件</button>',
methods: {
handleEvent: function () {
middleware.$emit('on-message', '来自组件tempcomponent-a的内容');
}
}
});
var app = new Vue({
el: '#app',
data: {
message: ''
},
mounted: function () {
var _this = this;
middleware.$on('on-message', function (msg) {
_this.message = msg;
})
},
});
</script>
</body>
在上面的代码中，空的Vue实例"middleware"就是我们的所谓的中央事件总线，我们可以看到，它负责在自组件"tempcomponent-a"中发出事件，在我们的主体Vue实例app中,通过监听"middleware"来获取子组件发出的内容。我的理解是中央事件总线就类似我们做交换数据的时候的临时变量一样，它在中间负责处理结果，然后返回消息给请求者,它的职责就是中介。这个空的vue实例也可以加入data，methods等选项，这些都是可以作为公用的。
二.父链$parent
父链这个词就很好理解啦，顾名思义即是组件的父对象，在组件内部可以直接通过$parent对父对象进行操作
<body>
<div id="app">
{{message}}
<tempcomponent-a></tempcomponent-a>
</div>
<script>
Vue.component('tempcomponent-a', {
template: '<button @click="handleEvent">通过父链直接修改数据</button>',
methods: {
handleEvent: function () {
this.$parent.message = '来自组件tempcomponent-a的消息';
}
}
});
var app = new Vue({
el: '#app',
data: {
message: ''
}
})
</script>
</body>
通过上面的代码，我们可以看到在自组件内，使用父链$parent直接对父对象对属性操作是非常简单的。
三.子组件索引ref&$refs
子组件这个也很好理解，是在父对象上对所拥有对子组件进行操作，一般来说父容器内对子组件会有多个，所以每个组件需要设置特殊属性ref来为自身指定一个唯一名称。
<body>
<div id="app">
<button @click="handleRef">通过ref获取子组件实例</button>
<tempcomponent-a ref="comA"></tempcomponent-a>
</div>
<script>
Vue.component('tempcomponent-a', {
template: '<div>子组件</div>',
data: function () {
return {
message: '子组件内容'
}
}
});
var app = new Vue({
el: '#app',
methods: {
handleRef: function () {
var msg = this.$refs.comA.message;
console.log(msg);
}
}
})
</script>
</body>
从代码可以看出，当我们直接在组件上创建ref属性，在父对象中想对子组件进行操作，直接通过$refs.加上该组件唯一对ref属性即可访问。注意$refs是子组件渲染完成之后才填充对，而且不是响应式，应避免在计算属性和模版中使用$refs
Vue组件之间通信的三种方式的更多相关文章
- vue组件之间通信的8种方式
对于vue来说,组件之间的消息传递是非常重要的,下面是我对组件之间消息传递的常用方式的总结. props和$emit(常用) $attrs和$listeners 中央事件总线(非父子组件间通信) v- ...
- vue组件之间通信总结(超详细)
组件通信在我们平时开发过程中,特别是在vue和在react中,有着举足轻重的地位.本篇将总结在vue中,组件之间通信的几种方式: props.$emit $parent.$children $attr ...
- 前端面试 vue 部分 (5)——VUE组件之间通信的方式有哪些
VUE组件之间通信的方式有哪些(SSS) 常见使用场景可以分为三类: 父子通信: null 父向子传递数据是通过 props ,子向父是通过 $emit / $on $emit / $bus Vuex ...
- IPC进程之间通信的几种方式
概念 进程间通信就是在不同进程之间传播或交换信息,那么不同进程之间存在着什么双方都可以访问的介质呢?进程的用户空间是互相独立的,一般而言是不能互相访问的,唯一的例外是 共享内存区 .但是,系统空间却是 ...
- Vue 组件之间通信 All in One
Vue 组件之间通信 All in One 组件间通信 1. 父子组件之间通信 https://stackblitz.com/edit/vue-parent-child-commutation?fil ...
- (尚031)Vue_案例_自定义事件(组件间通信第2种方式:vue自定义事件)
自定义事件: 我们知道,父组件使用prop传递数据的子组件,但子组件怎么跟父组件通信呢? 这个时候Vue的自定义事件系统就派得上用场了. 自定义事件知道两件事: (1).绑定 (2).触发 注意:$o ...
- Angular 组件通信的三种方式
我们可以通过以下三种方式来实现: 传递一个组件的引用给另一个组件 通过子组件发送EventEmitter和父组件通信 通过serive通信 1. 传递一个组件的引用给另一个组件 Demo1 模板引用变 ...
- [转] React 中组件间通信的几种方式
在使用 React 的过程中,不可避免的需要组件间进行消息传递(通信),组件间通信大体有下面几种情况: 父组件向子组件通信 子组件向父组件通信 跨级组件之间通信 非嵌套组件间通信 下面依次说下这几种通 ...
- Vue组件之间通信
vue组件传值有以下几种情况: 父组件向子组件传值.子组件向父组件传值.兄弟组件之间传值等 一.父组件向子组件传值: 传值方式: props <father> // 动态传递值 <s ...
随机推荐
- Hive之执行计划分析(explain)
Hive是通过把sql转换成对应mapreduce程序,然后提交到Hadoop上执行,查看具体的执行计划可以通过执行explain sql知晓 一条sql会被转化成由多个阶段组成的步骤,每个步骤有执行 ...
- MongoDB小结04 - update【$inc】
update方法很强大,它有两个参数,一是查询文档,用来找出需要更新的文档,另一个是修改器(modifier)文档,描述对找到的文档做哪些修改. 亮点 更新操作是原子的,若两个更新同时发生,先到达服务 ...
- 2014-8-21的一次性能诊断--应用server瓶颈
今天现场实施反馈系统总体慢.已经接到用户许多的投诉,要求现场发回weblogic日志和Oracle 数据库报告.简要说下系统的架构:典型的B/S三层架构,开发语言是java,中间件用的是weblogi ...
- BIOS Setup
一般而言,普通的计算机系统应用不必关注BIOS的设置.但是如果涉及到主板集成声卡,网卡,或需要进行远程网络唤醒等操作时,必须在BIOS中设置相应参数才能使电脑正常工作.BIOS能对硬件设备进行初始 ...
- start-all.sh 启动时报错解决方案
文件拥有者不是当前用户,或者文件权限没有修改权限 解决方法: sudo chmod 777 "文件名" 或者用 su root 登录,然后删除 再 exit Datanote服 ...
- [Algorithms] Insertion sort algorithm using TypeScript
Insertion sort is a very intuitive algorithm as humans use this pattern naturally when sorting cards ...
- AutoCAD如何方便截图放到Word文档，改成白底黑字
将模型视图切换到布局2即可 比如下图所示的效果 先回到模型视图把所有线条颜色都改成白色,然后添加适当的标注(比如要受力分析,则在CAD中绘制箭头也很方便的),文字说明.然后切换到布局2就OK ...
- Android中通过反射来设置Toast的显示时间
这个Toast的显示在Android中的用途还是非常大的,同一时候我们也知道toast显示的时间是不可控的.我们仅仅能改动他的显示样式和显示的位置,尽管他提供了一个显示时间的设置方法.可是那是没有效果 ...
- oracle initialization or shutdown in progress 问题解决
今天登录oracle时遇到oracle initialization or shutdown in progress 这个错误提示,在网上搜了下,试了非常多方法,最后结合几种方法结合,成功攻克了问题! ...
- 合并小图片利器TexturePacker GUI
合并小图片,能够非常大的节省网络开销.尤其如今的站点非常喜欢使用大量的小图标来做一些友好提示.当然使用图片文字也是一种选择. 只是这里推荐的是TexturePacker GUI ,这个确实是一款利器. ...