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>