Vue 组件间通信六种方式（完整版）

前言

组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系：

如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系（可能隔多代）。

针对不同的使用场景，如何选择行之有效的通信方式？这是我们所要探讨的主题。本文总结了vue组件间通信的几种方式，如props、 $emit/ $on、vuex、 $parent / $children、 $attrs/ $listeners和provide/inject，以通俗易懂的实例讲述这其中的差别及使用场景，希望对小伙伴有些许帮助。

本文的代码请猛戳https://github.com/ljianshu/Blog，纸上得来终觉浅，大家动手多敲敲代码！

方法一、 props　/ $emit

父组件A通过props的方式向子组件B传递，B to A 通过在 B 组件中 $emit, A 组件中 v-on 的方式实现。

1.父组件向子组件传值

接下来我们通过一个例子，说明父组件如何向子组件传递值：在子组件Users.vue中如何获取父组件App.vue中的数据 users:["Henry","Bucky","Emily"]

<code>//App.vue父组件

  

      //前者自定义名称便于子组件调用，后者要传递数据名
  

/<code>

总结：父组件通过props向下传递数据给子组件。注：组件中的数据共有三种形式：data、props、computed

2.子组件向父组件传值（通过事件形式）

接下来我们通过一个例子，说明子组件如何向父组件传递值：当我们点击“Vue.js Demo”后，子组件向父组件传递值，文字由原来的“传递的是一个值”变成“子向父组件传值”，实现子组件向父组件值的传递。

<code>// 子组件

  
    
{{title}}
//绑定一个点击事件
  

/<code>

<code>// 父组件

  

    //与子组件titleChanged自定义事件保持一致
   // updateTitle($event)接受传递过来的文字
    
{{title}}
  


/<code>

总结：子组件通过events给父组件发送消息，实际上就是子组件把自己的数据发送到父组件。

方法二、 $emit　/ $on

这种方法通过一个空的Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级。当我们的项目比较大时，可以选择更好的状态管理解决方案vuex。

1.具体实现方式：

<code> var Event=new Vue();
    Event.$emit(事件名,数据);    
    Event.$on(事件名,data => {});/<code>

SQL优化，快速插入高效方法，索引，springboot各种问题，ioc,aop，事务处理，redis基础类型，java8新特性，lambda表达式，map，list，list转map

<code>
   
   
    



   
A组件：{{name}}
    

  


  
   
B组件：{{age}}
    

  



  
    
C组件：{{name}}，{{age}}
  


/<code>