最近在看梁颠编著的《Vue.js实战》一书，感觉颇有收获，特此记录一些比价实用的技巧。
组件是MVVM框架的核心设计思想，将各功能点组件化更利于我们在项目中复用，这类似于我们服务端面向对象三大特性之一的封装，将复杂的会被多次调用的代码封装成组件,在需要调用的地方注册使用即可。这样设计的前端代码方便移植，可以跨项目复用。
组件之间的关系分为父子组件兄弟组件和跨多级组件等等，在组件之间交互数据，进行通信主要通过三种方式来进行：
中央事件总线(非父子组件通信)
父链
子组件索引
下面让我们来好好说道说道这三种通信方式：
一.中央事件总线
这个东西名字叫的很唬人，但实际却是很好理解的一种通信方式，话不多说，我们来上代码。
{{message}}
var middleware = new Vue();
Vue.component('tempcomponent-a', {
template: '传递事件',
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;
})
},
});
在上面的代码中，空的Vue实例"middleware"就是我们的所谓的中央事件总线，我们可以看到，它负责在自组件"tempcomponent-a"中发出事件，在我们的主体Vue实例app中,通过监听"middleware"来获取子组件发出的内容。我的理解是中央事件总线就类似我们做交换数据的时候的临时变量一样，它在中间负责处理结果，然后返回消息给请求者,它的职责就是中介。这个空的vue实例也可以加入data，methods等选项，这些都是可以作为公用的。
二.父链$parent
父链这个词就很好理解啦，顾名思义即是组件的父对象，在组件内部可以直接通过$parent对父对象进行操作
{{message}}
Vue.component('tempcomponent-a', {
template: '通过父链直接修改数据',
methods: {
handleEvent: function () {
this.$parent.message = '来自组件tempcomponent-a的消息';
}
}
});
var app = new Vue({
el: '#app',
data: {
message: ''
}
})
通过上面的代码，我们可以看到在自组件内，使用父链$parent直接对父对象对属性操作是非常简单的。
三.子组件索引ref&$refs
子组件这个也很好理解，是在父对象上对所拥有对子组件进行操作，一般来说父容器内对子组件会有多个，所以每个组件需要设置特殊属性ref来为自身指定一个唯一名称。
通过ref获取子组件实例
Vue.component('tempcomponent-a', {
template: '
data: function () {
return {
message: '子组件内容'
}
}
});
var app = new Vue({
el: '#app',
methods: {
handleRef: function () {
var msg = this.$refs.comA.message;
console.log(msg);
}
}
})
从代码可以看出，当我们直接在组件上创建ref属性，在父对象中想对子组件进行操作，直接通过$refs.加上该组件唯一对ref属性即可访问。注意$refs是子组件渲染完成之后才填充对，而且不是响应式，应避免在计算属性和模版中使用$refs
vue组件之间通信的8种方式
对于vue来说,组件之间的消息传递是非常重要的,下面是我对组件之间消息传递的常用方式的总结. props和$emit(常用) $attrs和$listeners 中央事件总线(非父子组件间通信) v- ...
前端面试 vue 部分 (5)——VUE组件之间通信的方式有哪些
VUE组件之间通信的方式有哪些(SSS) 常见使用场景可以分为三类: 父子通信: null 父向子传递数据是通过 props ,子向父是通过 $emit / $on $emit / $bus Vuex ...
IPC进程之间通信的几种方式
概念 进程间通信就是在不同进程之间传播或交换信息,那么不同进程之间存在着什么双方都可以访问的介质呢?进程的用户空间是互相独立的,一般而言是不能互相访问的,唯一的例外是 共享内存区 .但是,系统空间却是 ...
(尚031)Vue_案例_自定义事件(组件间通信第2种方式:vue自定义事件)
自定义事件: 我们知道,父组件使用prop传递数据的子组件,但子组件怎么跟父组件通信呢? 这个时候Vue的自定义事件系统就派得上用场了. 自定义事件知道两件事: (1).绑定 (2).触发 注意:$o ...
[转] React 中组件间通信的几种方式
在使用 React 的过程中,不可避免的需要组件间进行消息传递(通信),组件间通信大体有下面几种情况: 父组件向子组件通信 子组件向父组件通信 跨级组件之间通信 非嵌套组件间通信 下面依次说下这几种通 ...
容器间通信的三种方式 - 每天5分钟玩转 Docker 容器技术(35)
容器之间可通过 IP,Docker DNS Server 或 joined 容器三种方式通信. IP 通信 从上一节的例子可以得出这样一个结论:两个容器要能通信,必须要有属于同一个网络的网卡. 满足这 ...
vue路由传参的三种方式以及解决vue路由传参页面刷新参数丢失问题
最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...
vue组件之间通信传值
原文链接:https://blog.csdn.net/lander_xiong/article/details/79018737 我认为这位博主的这篇文章写的非常详细,通俗易懂, 我们这次的vue项目 ...
React 中组件间通信的几种方式
在使用 React 的过程中,不可避免的需要组件间进行消息传递(通信),组件间通信大体有下面几种情况: 父组件向子组件通信 子组件向父组件通信 非嵌套组件间通信 跨级组件之间通信 1.父组件向子组件通 ...
随机推荐
WinForm关闭窗体彻底的退出方式
//System.Environment.Exit(0); //Process.GetCurrentProcess().Kill(); //System.Threading.Thread.Curren ...
LeetCode 268
Missing Number Given an array containing n distinct numbers taken from 0, 1, 2, ..., n, find the one ...
java之路径
在学习java的过程中经常遇见关于路径的问题:到底是使用绝对路径还是相对路径? 个人推荐使用相对路径,如果是使用绝对路径,到后期项目发布的时候会出现许多问题. 那么相对路径怎么用来: 一. Syste ...
【Keras篇】---Keras初始，两种模型构造方法，利用keras实现手写数字体识别
一.前述 Keras 适合快速体验 ,keras的设计是把大量内部运算都隐藏了,用户始终可以用theano或tensorflow的语句来写扩展功能并和keras结合使用. 二.安装 Pip insta ...
PostgreSql的Explain命令详解
http://toplchx.iteye.com/blog/2091860 使用EXPLAIN PostgreSQL为每个收到的查询设计一个查询规划.选择正确的匹配查询结构和数据属性的规划对执行效率是 ...
Java集合类的那点通俗的认知
文/沉默王二 开门见山地说吧,Java提供了一套完整的集合类(也可以叫做容器类)来管理一组长度可变的对象(也就是集合的元素),其中常见的类型包括List.Set.Queue和Map.从我个人的编程经验 ...
[sh]top添加到crontab不生效问题解决
今天遇到个小问题 top结果赋值给变量,放到文件做处理, 但是不生效问题. https://www.phpbulo.com/archives/509.html cat top.sh NAME=&quo ...
[BZOJ]|[Ural] Formula 1-----插头DP入门
1519. Formula 1 Time limit: 1.0 secondMemory limit: 64 MB Background Regardless of the fact, that Vo ...
8249
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
