vue8種通訊方式

2022-03-15 04:47:50 字數 1137 閱讀 6580

參考:寫的很詳細)

《vue.js實戰》

本人實際操作:

我這邊籠統說一下

1.props/$emit 

概念:父元件通過props的方式向子元件傳遞資料,而通過$emit子元件可以向父元件通訊。

2.$children/$parent

概念: 通過$parent$children就可以訪問元件的例項。

使用 this.$parent查詢當前元件的父元件。

使用 this.$children查詢當前元件的直接子元件,可以遍歷全部子元件, 需要注意 $children 並不保證順序,也不是響應式的。

3.provide/ inject

概念:provide/injectvue2.2.0新增的api, 簡單來說就是父元件中通過provide來提供變數, 然後再子元件中通過inject來注入變數。

4.ref/ refs

概念:ref:如果在普通的 dom 元素上使用,引用指向的就是 dom 元素;如果用在子元件上,引用就指向元件例項,可以通過例項直接呼叫元件的方法或訪問資料

5.eventbus

概念:eventbus又稱為事件匯流排,在vue中可以使用它來作為溝通橋梁的概念, 就像是所有元件共用相同的事件中心,可以向該中心註冊傳送事件或接收事件, 所以元件都可以通知其他元件。

6.vuex

概念:vuex 是乙個專為 vue.js 應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態,並以相應的規則保證狀態以一種可**的方式發生變化. vuex 解決了多個檢視依賴於同一狀態來自不同檢視的行為需要變更同一狀態的問題,將開發者的精力聚焦於資料的更新而不是資料在元件之間的傳遞上。

7.localstorage / sessionstorage

8.attrs/$listeners

概念:是vue2.4.0引入的該方法,為了解決跨級的元件

常見使用場景可以分為三類:

初識vue 8 父子元件通訊示例

子元件中設定props屬性,去接收父元件資料。為什麼要設定屬性去接收?因為v bind指令就是動態的給值,v bind 子元件屬性變數 父元件存放資料變數 子元件 emit發射事件,並且攜帶引數一起發射。父元件在外部用v on接收傳送的事件和傳出的值。下面是乙個示例,大概是父元件把number1 n...

學習Vue(8) 表單

表單是前端中用到非常多的部分,這裡將用vue實現資料的雙向繫結。可以用 v model 指令在表單控制項元素上建立雙向資料繫結。使用v model進行雙向繫結資料,即一邊的資料發生變化,另一邊的資料也發生變化。密碼 備註 瀏覽器顯示 核取方塊如果是乙個為邏輯值,如果是多個則繫結到同乙個陣列。選中的值...

vue元件之間通訊的8種方式

對於vue來說,元件之間的訊息傳遞是非常重要的,下面是我對元件之間訊息傳遞的常用方式的總結。1.props和 emit 父元件向子元件傳遞資料是通過prop傳遞的,子元件傳遞資料給父元件是通過 emit觸發事件來做到的.1 vue.component child 6 7 template 8 9 1...