有沒有辦法捕捉vuejs中的多個子組件發出的事件？

我有具有多個子組件有沒有辦法捕捉vuejs中的多個子組件發出的事件？

<grid> 
    <cell></cell> 
    <cell></cell> 
    <cell></cell> 
</grid>

我的電池組件發出與有效載荷事件說它正在編輯 this.$emit('editing',cellId)

我知道我可以捕獲事件像 <cell @editing="do something"></cell>或捕獲父組件使用EventBus.$on('editing')，我不想使用根偵聽器以及this.$root.$on('editing')

但是因爲它的父組件，我怎麼能聽'edi事件ting'當父組件安裝時

mounted: function(){ 
    this.$on('editing',dosomething) 
}

爲什麼我無法在父組件加載時添加監聽？

來源

2017-07-18 Masade

您的「掛載」功能正在監聽父組件上的事件。子組件自行發出事件。你的目標是什麼，爲什麼你不想做''事件處理的形式？ –

我對你的目標有點不清楚。如果可能，請澄清你的目標。但是如果你想在父組件中監聽'edit'事件，你可以在掛載的鉤子中使用EventBus：'EventBus。$ on（'editing'）' – ironcladgeek

我想從概念上理解這一點以及子中的事件是如何工作的。我所知道的最好的方法是'<細胞@editing =「...」'不使用eventBus或發射到$根所以是什麼'mounted'聽和監聽組件之間的區別'@ editing' – Masade

您缺少在Custom Events部分中描述的主要區別：

此外，父組件可以在模板中使用V-直接傾聽來自孩子組件所發出的事件，其中子組件被使用。

您不能使用$來聆聽兒童發出的事件。您需要必須在模板中使用v-on 直接，如下面的示例所示。

這意味着是兒童家長的溝通是通過指令完成，使用v-on（或@edit）的方式。

你舉的例子這裏

mounted: function(){ 
    this.$on('editing',dosomething) 
}

實際並不起作用。在emit documentation這裏說的是：

在當前實例上觸發事件。

這意味着相同組件裏面，你可以實際使用this.$on，它會工作。但是如果你想在父代中使用它，那麼你應該使用inline指令來綁定它，否則它將無法工作。

而且記住emits僅適用於一個單一的步驟，這意味着家長可以抓住它。如果你需要發出subchild - >子 - >父，那麼你就應該抓住事件child（使用內聯結合）從subchild，再如此這般於母公司重新發射它。

如果是孩子父母範圍之外，那麼你就應該使用所謂a global bus。基本上它將所有事件的範圍縮小到一個實例，其中emits和。因此，他們不再是孩子父母或任何類型的連接，他們都在同一個實例上，因此您可以隨時在您的每個組件中使用它們。

底線是 - 你的方法，聽取關於安裝將無法正常工作。希望有所幫助:)

來源

2017-07-19 10:16:53

傾聽每一個孩子和聽EventBus之間的區別是：

當你的時候，你不喜歡EventBus.$emit('event') then your event will be sent to all the components

一個EventBus有發出像this.$emit('event') the event will be fired only for the parent component.

事件每個人的利弊; EventBus可以將事件發送到永遠不會使用該事件的組件（可以成爲事件污染），並且父事件發射器可能不夠優雅以用作EventBus。
所以你決定哪種方法對你有好處。

來源

2017-07-19 07:07:18

有沒有辦法捕捉vuejs中的多個子組件發出的事件？

回答

相關問題