最近在看梁颠编著的《Vue.js实战》一书，感觉颇有收获，特此记录一些比价实用的技巧。

组件是MVVM框架的核心设计思想，将各功能点组件化更利于我们在项目中复用，这类似于我们服务端面向对象三大特性之一的封装，将复杂的会被多次调用的代码封装成组件,在需要调用的地方注册使用即可。这样设计的前端代码方便移植，可以跨项目复用。

组件之间的关系分为父子组件兄弟组件和跨多级组件等等，在组件之间交互数据，进行通信主要通过三种方式来进行：

  1. 中央事件总线（非父子组件通信）
  2. 父链
  3. 子组件索引

下面让我们来好好说道说道这三种通信方式：

一.中央事件总线

  这个东西名字叫的很唬人，但实际却是很好理解的一种通信方式，话不多说，我们来上代码。

  1. <body>
  2.     <div id="app">
  3.         {{message}}
  4.         <tempcomponent-a></tempcomponent-a>
  5.     </div>
  6.     <script>
  7.         var middleware = new Vue();
  8.  
  9.         Vue.component('tempcomponent-a', {
  10.             template: '<button @click="handleEvent">传递事件</button>',
  11.             methods: {
  12.                 handleEvent: function () {
  13.                     middleware.$emit('on-message', '来自组件tempcomponent-a的内容');
  14.                 }
  15.             }
  16.         });
  17.         var app = new Vue({
  18.             el: '#app',
  19.             data: {
  20.                 message: ''
  21.             },
  22.             mounted: function () {
  23.                 var _this = this;
  24.                 middleware.$on('on-message', function (msg) {
  25.                     _this.message = msg;
  26.                 })
  27.             },
  28.         });
  29.     </script>
  30. </body>

在上面的代码中，空的Vue实例"middleware"就是我们的所谓的中央事件总线，我们可以看到，它负责在自组件"tempcomponent-a"中发出事件，在我们的主体Vue实例app中,通过监听"middleware"来获取子组件发出的内容。我的理解是中央事件总线就类似我们做交换数据的时候的临时变量一样，它在中间负责处理结果，然后返回消息给请求者,它的职责就是中介。这个空的vue实例也可以加入data，methods等选项，这些都是可以作为公用的。

二.父链$parent

父链这个词就很好理解啦，顾名思义即是组件的父对象，在组件内部可以直接通过$parent对父对象进行操作

  1. <body>
  2.     <div id="app">
  3.         {{message}}
  4.         <tempcomponent-a></tempcomponent-a>
  5.     </div>
  6.     <script>
  7.         Vue.component('tempcomponent-a', {
  8.             template: '<button @click="handleEvent">通过父链直接修改数据</button>',
  9.             methods: {
  10.                 handleEvent: function () {
  11.                     this.$parent.message = '来自组件tempcomponent-a的消息';
  12.                 }
  13.             }
  14.         });
  15.         var app = new Vue({
  16.             el: '#app',
  17.             data: {
  18.                 message: ''
  19.             }
  20.         })
  21.     </script>
  22. </body>

通过上面的代码，我们可以看到在自组件内，使用父链$parent直接对父对象对属性操作是非常简单的。

三.子组件索引ref&$refs

子组件这个也很好理解，是在父对象上对所拥有对子组件进行操作，一般来说父容器内对子组件会有多个，所以每个组件需要设置特殊属性ref来为自身指定一个唯一名称。

  1. <body>
  2.     <div id="app">
  3.         <button @click="handleRef">通过ref获取子组件实例</button>
  4.         <tempcomponent-a ref="comA"></tempcomponent-a>
  5.     </div>
  6.     <script>
  7.         Vue.component('tempcomponent-a', {
  8.             template: '<div>子组件</div>',
  9.             data: function () {
  10.                 return {
  11.                     message: '子组件内容'
  12.                 }
  13.             }
  14.         });
  15.         var app = new Vue({
  16.             el: '#app',
  17.             methods: {
  18.                 handleRef: function () {
  19.                     var msg = this.$refs.comA.message;
  20.                     console.log(msg);
  21.                 }
  22.             }
  23.         })
  24.     </script>
  25. </body>

从代码可以看出，当我们直接在组件上创建ref属性，在父对象中想对子组件进行操作，直接通过$refs.加上该组件唯一对ref属性即可访问。注意$refs是子组件渲染完成之后才填充对，而且不是响应式，应避免在计算属性和模版中使用$refs

Vue组件之间通信的三种方式的更多相关文章

  1. vue组件之间通信的8种方式

    对于vue来说,组件之间的消息传递是非常重要的,下面是我对组件之间消息传递的常用方式的总结. props和$emit(常用) $attrs和$listeners 中央事件总线(非父子组件间通信) v- ...

  2. vue组件之间通信总结(超详细)

    组件通信在我们平时开发过程中,特别是在vue和在react中,有着举足轻重的地位.本篇将总结在vue中,组件之间通信的几种方式: props.$emit $parent.$children $attr ...

  3. 前端面试 vue 部分 (5)——VUE组件之间通信的方式有哪些

    VUE组件之间通信的方式有哪些(SSS) 常见使用场景可以分为三类: 父子通信: null 父向子传递数据是通过 props ,子向父是通过 $emit / $on $emit / $bus Vuex ...

  4. IPC进程之间通信的几种方式

    概念 进程间通信就是在不同进程之间传播或交换信息,那么不同进程之间存在着什么双方都可以访问的介质呢?进程的用户空间是互相独立的,一般而言是不能互相访问的,唯一的例外是 共享内存区 .但是,系统空间却是 ...

  5. Vue 组件之间通信 All in One

    Vue 组件之间通信 All in One 组件间通信 1. 父子组件之间通信 https://stackblitz.com/edit/vue-parent-child-commutation?fil ...

  6. (尚031)Vue_案例_自定义事件(组件间通信第2种方式:vue自定义事件)

    自定义事件: 我们知道,父组件使用prop传递数据的子组件,但子组件怎么跟父组件通信呢? 这个时候Vue的自定义事件系统就派得上用场了. 自定义事件知道两件事: (1).绑定 (2).触发 注意:$o ...

  7. Angular 组件通信的三种方式

    我们可以通过以下三种方式来实现: 传递一个组件的引用给另一个组件 通过子组件发送EventEmitter和父组件通信 通过serive通信 1. 传递一个组件的引用给另一个组件 Demo1 模板引用变 ...

  8. [转] React 中组件间通信的几种方式

    在使用 React 的过程中,不可避免的需要组件间进行消息传递(通信),组件间通信大体有下面几种情况: 父组件向子组件通信 子组件向父组件通信 跨级组件之间通信 非嵌套组件间通信 下面依次说下这几种通 ...

  9. Vue组件之间通信

    vue组件传值有以下几种情况: 父组件向子组件传值.子组件向父组件传值.兄弟组件之间传值等 一.父组件向子组件传值: 传值方式: props <father> // 动态传递值 <s ...

随机推荐

  1. 恢复表数据的办法（delete删除可恢复，truncate不可恢复）

    select * from table_name as of timestamp to_timestamp('2018-12-20 00:00:00', 'yyyy-mm-dd hh24:mi:ss' ...

  2. 有用的 SystemTap 脚本

    https://segmentfault.com/a/1190000000680628 https://github.com/posulliv/stap

  3. MongoDB小结06 - update【$push】

    数组修改器,既然名字都这样叫了,那么这个修改器就只能对数组进行操作啦. db.user.update({"name":"qianjiahao"},{" ...

  4. JFileChooser 中文API

    javax.swing类 JFileChooser java.lang.Object java.awt.Component java.awt.Container javax.swing.JCompon ...

  5. js 合并对象

    对象的合并 需求:设有对象 o1 ,o2,需要得到对象 o3 var o1 = { a:'a' }, o2 = { b:'b' }; // 则 var o3 = { a:'a', b:'b' } 方法 ...

  6. Android studio 插件之 GsonFormat (自己主动生成javabean)

    概述 相信大家在做开发的过程中都写过非常多的javabean ,非常多情况下 都是一个列表数据就是一个单独的javabean.假设大家自己敲的话费时费力 还非常easy敲错. 今天给大家推荐一个插件 ...

  7. python搭建web server

    假设你急需一个简单的Web Server,但你又不想去下载并安装那些复杂的HTTP服务程序,比方:Apache,ISS等.那么, Python 可能帮助你.使用Python能够完毕一个简单的内建 HT ...

  8. C语言之基本算法21—可逆素数

    /* ================================================================== 题目:可逆素数是指一个数是素数,逆序后还是素数,如ABC是素 ...

  9. MongoDB升级导致启动失败

    起因 最近项目使用MongoDB,但是作为一个技术菜鸟,NoSQL数据库我还真不会用,于是我就在自己的阿里云服务器上安装了一个MongoDB4.0.9. 现象 但是当我使用yum -y update升 ...

  10. C++之new和malloc差别

         在C++程序猿面试中.非常easy被问到new 和 malloc的差别.偶尔在quora上逛.看到Robert Love的总结.才发现自己仅仅知道里面的一两项就沾沾自喜,从来没有像这位大牛一 ...