vue元件通訊

2021-09-27 04:28:27 字數 2856 閱讀 4586

vue 元件間通訊有哪幾種方式?

vue 元件間通訊是面試常考的知識點之一,這題有點類似於開放題,你回答出越多方法當然越加分,表明你對 vue 掌握的越熟練。vue 元件間通訊只要指以下 3 類通訊:父子元件通訊、隔代元件通訊、兄弟元件通訊,下面我們分別介紹每種通訊方式且會說明此種方法可適用於哪類元件間通訊。

(1)props / $emit 適用 父子元件通訊

這種方法是 vue 元件的基礎,相信大部分同學耳聞能詳,所以此處就不舉例展開介紹。

(2)ref 與 $parent / $children 適用 父子元件通訊

ref:如果在普通的 dom 元素上使用,引用指向的就是 dom 元素;如果用在子元件上,引用就指向元件例項

$parent / $children:訪問父 / 子例項

(3)eventbus ($emit / on)

適用于父

子、隔代

、兄弟組

件通訊這

種方法通

過乙個空

的vue

例項作為

中央事件

匯流排(事

件中心)

,用它來

觸發事件

和監聽事

件,從而

實現任何

元件間的

通訊,包

括父子、

隔代、兄

弟元件。

(4

)on) 適用於 父子、隔代、兄弟元件通訊 這種方法通過乙個空的 vue 例項作為**事件匯流排(事件中心),用它來觸發事件和監聽事件,從而實現任何元件間的通訊,包括父子、隔代、兄弟元件。 (4)

on)適用於

父子、隔

代、兄弟

元件通訊

這種方法

通過乙個

空的vu

e例項作

為**事

件匯流排(

事件中心

),用它

來觸發事

件和監聽

事件,從

而實現任

何元件間

的通訊,

包括父子

、隔代、

兄弟元件

。(4)

attrs/$listeners 適用於 隔代元件通訊

a tt

rs:包

含了父作

用域中不

被pro

p所識別

(且獲取

)的特性

繫結(c

lass

和sty

le除外

)。當一

個元件沒

有宣告任

何pro

p時,這

裡會包含

所有父作

用域的綁

定(cl

ass和

styl

e除外)

,並且可

以通過v

−bin

d=

"attrs:包含了父作用域中不被 prop 所識別 (且獲取) 的特性繫結 ( class 和 style 除外 )。當乙個元件沒有宣告任何 prop 時,這裡會包含所有父作用域的繫結 ( class 和 style 除外 ),並且可以通過 v-bind="

attrs:

包含了父

作用域中

不被pr

op所識

別(且獲

取)的特

性繫結(

clas

s和st

yle除

外)。當

乙個元件

沒有宣告

任何pr

op時,

這裡會包

含所有父

作用域的

繫結(c

lass

和sty

le除外

),並且

可以通過

v−bi

nd="

attrs" 傳入內部元件。通常配合 inheritattrs 選項一起使用。

l is

tene

rs:包

含了父作

用域中的

(不含.

nati

ve修飾

器的)v

−on事

件監聽器

。它可以

通過v−

on="

listeners:包含了父作用域中的 (不含 .native 修飾器的) v-on 事件***。它可以通過 v-on="

listen

ers:

包含了父

作用域中

的(不含

.nat

ive修

飾器的)

v−on

事件監聽

器。它可

以通過v

−on=

"listeners" 傳入內部元件

(5)provide / inject 適用於 隔代元件通訊

祖先元件中通過 provider 來提供變數,然後在子孫元件中通過 inject 來注入變數。 provide / inject api 主要解決了跨級元件間的通訊問題,不過它的使用場景,主要是子元件獲取上級元件的狀態,跨級元件間建立了一種主動提供與依賴注入的關係。

(6)vuex 適用於 父子、隔代、兄弟元件通訊

vuex 是乙個專為 vue.js 應用程式開發的狀態管理模式。每乙個 vuex 應用的核心就是 store(倉庫)。「store」 基本上就是乙個容器,它包含著你的應用中大部分的狀態 ( state )。

vuex 的狀態儲存是響應式的。當 vue 元件從 store 中讀取狀態的時候,若 store 中的狀態發生變化,那麼相應的元件也會相應地得到高效更新。

改變 store 中的狀態的唯一途徑就是顯式地提交 (commit) mutation。這樣使得我們可以方便地跟蹤每乙個狀態的變化。

Vue 元件通訊

單層元件通訊 prop 元件例項的作用域是孤立的。這意味著不能 也不應該 在子元件的模板內直接引用父元件 的資料。父元件的資料需要通過 prop 才能下發到子元件中。子元件要顯式地用 props 選項宣告它預期的資料 vue.component child 然後給他傳乙個訊息 message hel...

vue元件通訊

這部分vue文件已經說的很清楚了,但是為了更好的理解,自己再整理一遍。首先,父元件的與子元件的通訊是通過子元件的props。那麼子元件有資料變化時,想要通知父元件應該怎麼辦呢?父元件可以在使用子元件的地方直接用 v on 來監聽子元件觸發的事件。簡單來說,就是子元件監聽的事件,在函式內使用 emit...

Vue元件通訊

父子級通訊推薦使用 props emit parent children refs attrs listeners 子元件使用props 接收父元件傳遞的值 父元件向子元件傳值 子元件通過 emit 讓父元件接收事件,改變父元件的data裡面的值 子元件向父元件傳值 父元件 子元件 這裡的props...