vue的元件通訊的方式

關於vue元件相互通訊的幾種方式如下

父元件通過props向下傳遞資料給子元件，子元件通過event給父元件傳送訊息，實際上就是子元件把自己的資料傳送給父元件。

第一種方式處理父子元件之間的資料傳輸有乙個問題：如果父元件a下面有子元件b，元件b下面有元件c,這時如果元件a想傳遞資料給元件c怎麼辦呢？如果採用第一種方法，我們必須讓元件a通過prop傳遞訊息給元件b，元件b在通過prop傳遞訊息給元件c；要是元件a和元件c之間有更多的元件，那採用這種方式就很複雜了。vue 2.4開始提供了att

和attrs和

attrs和

listeners來解決這個問題，能夠讓元件a之間傳遞訊息給元件c。


>
>
type
="text"
v-model
="$attrs.messagec"
@input
="passcdata($attrs.messagec)"
>
div>
template
>


export
default},
methods:}}
<
/script>


>
>
type
="text"
v-model
="mymessage"
@input
="passdata(mymessage)"
>
v-bind
="$attrs"
v-on
="$listeners"
>
c>
div>
template
>


export
default],
//得到父元件a傳遞過來的資料,hello b
methods:}}
<
/script>


>
>
>
this is parent compoent!p
>
:messagec
="messagec"
:message
="message"
:getcdata
="getcdata"
:getchilddata
="getchilddata"
>
b>
div>
template
>


export
default},
methods:
,//執行c子元件觸發的事件
getcdata
(val)}}
<
/script>

在 vue.js 的2.2.0+版本中新增加了 provide 和 inject 選項。他們成對出現，用於父級元件向下傳遞資料。

父元件中通過provide來提供變數，然後在子元件中通過inject來注入變數。不論子元件有多深，只要呼叫了inject那麼就可以注入provide中的資料。而不是侷限於只能從當前父元件的prop屬性來獲取資料，只要在父元件的生命週期內，子元件都可以呼叫。


>
>
>
this is parent compoent!p
>
>
child
>
div>
template
>


export
default
,data()
}}<
/script>


>
>
type
="text"
v-model
="mymessage"
>
div>
template
>


export
default
,data()
}}<
/script>

如果業務邏輯複雜，很多元件之間需要同時處理一些公共的資料，這個時候才有上面這一些方法可能不利於專案的維護，vuex的做法就是將這一些公共的資料抽離出來，然後其他元件就可以對這個公共資料進行讀寫操作，這樣達到了解耦的目的。

如果兩個元件不是父子關係呢？這種情況下可以使用**事件匯流排的方式。新建乙個vue事件bus物件，然後通過bus.emi

t觸發事

件，bu

emit觸發事件，bus.

emit觸發

事件，b

us.on監聽觸發的事件。

公共事件匯流排eventbus的實質就是建立乙個vue例項，通過乙個空的vue例項作為橋梁實現vue元件間的通訊。它是實現非父子元件通訊的一種解決方案。


>
>
>
this is brother1 compoent!p
>
type
="text"
v-model
="mymessage"
@input
="passdata(mymessage)"
>
div>
template
>
>
export
default},
methods:}}
script
>


>
>
>
this is brother2 compoent!p
>
>
brother1傳遞過來的資料：}p
>
div>
template
>
>
export
default},
mounted()
)}}script
>

//**事件匯流排
var bus=
newvue()
;new
vue(
})

vue.
component
('child',,
data()
},methods:},
template:
`    `}
)  vue.
component
('parent',}
,data()
}})new
vue(
)

父beforecreate-
>父created-
>父beforemount-
>子beforecreate-
>子created-
>子beforemount-
>子mounted-
>父mounted

父beforeupdate-
>子beforeupdate-
>子updated-
>父updated

父beforeupdate-
>父updated

父beforedestroy-
>子beforedestroy-
>子destroyed-
>父destroyed

vue的元件通訊的方式

vue元件間通訊方式

vue元件間通訊的幾種方式

vue元件間的幾種通訊方式

vue的元件通訊的方式

vue元件間通訊方式

vue元件間通訊的幾種方式

vue元件間的幾種通訊方式

相關推薦