a---恢復內容開始---
元件vue.js最強大的功能之一,而元件例項的作用域是相互獨立的,這就是各種元件之間的資料是無法相互引用的,一般來說元件可以有以下幾種關係:
如圖所示,a和b,b和c,b和d都是父子關係,c和d是兄弟關係,a和c是個隔代關係(可能隔多代).
vue元件間的幾種通訊方式:如props,$emit/$on,vuex,$parent/$children,$attrs/$listener,和provide/inject
方法一:
父元件a通過props的方式向子元件b傳遞,b向a通過b元件中$emit,a元件中v-on的方式實現
1.父元件向子元件傳值
父元件**
子元件
執行效果
總結:父元件通過props向下傳遞資料給子元件.注:元件中的資料有三種形式:data props computed
2.子元件向父元件傳值(通過事件的形式)
例如:點選某個按鈕,子元件向父元件傳值:
子元件**:
父元件**:
在瀏覽器的執行的效果:
點選之後的效果
總結:子元件通過events給父元件傳送訊息,實際上就是把自己的資料傳送到父元件
方法二:$emit/$on
這種方法通過乙個空的vue例項作為**事件匯流排(事件中心),用它來觸發事件和監聽事件,巧妙而輕量地實現了任何元件間的通訊,包括了父子,兄弟,跨級.
1.具體的實現方式:
import vue from 'vue'const bus = new vue();
export default bus;
舉個例子:
父元件:
aa元件:
b元件:
c元件
瀏覽器上面執行的情況總結:監聽了自定義事件data-a和data-b,因為有時不確定什麼時候回觸發事件,所以一般會在mounted 或 created 鉤子中來監聽
方法三:vuex
方法四:$attrs/$listeners
多級元件巢狀需要傳遞資料時，通常使用的方法是通過vuex。但如果僅僅是傳遞資料，而不做中間處理，使用 vuex 處理，未免有點大材小用;為此vue2.4 版本提供了另一種方法----
$attrs/$listeners例如:父元件
子元件子子元件:
子子子元件
在瀏覽器上 執行的效果
如上圖所示
$attrs表示沒有繼承資料的物件，格式為。vue2.4提供了$attrs,$listeners來傳遞資料與事件，跨級元件之間的通訊變得更簡單。簡單來說：
$attrs與$listeners是兩個物件，$attrs裡存放的是父元件中繫結的非 props 屬性，$listeners裡存放的是父元件中繫結的非原生事件。方法五:provide/inject
方法六:
$parent/$children＆ ref未完再續......
---恢復內容結束---
vue元件通訊六種方法。
props emit v model 實現一層子級父級傳遞。children parent 返回的是乙個元件集合，但是需要手動新增下標，不推薦使用 元件一但很多，不利於維護 eventbus 用於兄弟之間傳遞，可以巢狀多層傳遞。provide inject 以允許乙個祖先元件向其所有子孫後代注入乙個...
vue元件間通訊方式
一 props emit 將要傳遞的引數繫結到元件上，子元件通過props接受引數 props 子元件通過事件傳遞給父元件 this emit functionname 值 只適用於父子 二 on emit 無差別轟炸，想隔幾層隔幾層傳 第一步新建js import vue from vue 使用 ...
vue 元件間通訊的6種方式
父元件通過 props 將資料傳給子元件，子元件通過 emit 將資料按照 events 的形式傳送給父元件。這種方法通過乙個空的 vue 例項作為 事件匯流排 事件中心 用它來觸發事件和監聽事件,巧妙而輕量地實現了任何元件間的通訊，包括父子 兄弟 跨級。當我們的專案比較大時，可以選擇更好的狀態管理...