Tag組件

Tag組件一般用來顯示當前操做的多項內容，在我司系統中，選擇多個不一樣站點下欄目的時候，就須要這種展現效果。可是並無作到組件化，每次寫相同的需求的時候都多了不少冗餘的代碼。

最終實現的效果

https://jsfiddle.net/huang_ju...

擴展

對組件間的通訊的理解

首先，先看一下Vue關於自定義事件的文檔說明：自定義事件
這裏，咱們着重關注下這兩句：

爲何說，$on監聽事件，可是不能用$on偵聽子組件釋放的事件呢？
咱們看API文檔中，對於$on, $emit的說明：

vm.$emit, 以及觸發的是當前實例上的事件！！！。

因此，當咱們在子組件中調用this.$emit的時候，被觸發的事件也只能在子組件的實例中被監聽到。若是這時候咱們在父組件的實例中去監聽this.$on(eventname)，這樣是確定監聽不到這個事件的。

而對於在模板中直接使用 @on:eventname = 'xxx'，應該能夠理解成是一種語法糖吧。否則要在父組件中去監聽這個事件，就須要使用事件總線了吧。

Vue過渡效果中，key屬性的應用

能夠在示例的代碼中，刪除模板中的key屬性，看下這時刪除操做的過渡效果。會發現每次都是把第一個元素給刪除了，而不是當前點擊的元素。解決辦法就是上面這個key屬性。

總結

Tag組件實現起來並不難，能夠看成熟悉Vue的一個練手demo。
經過Tag組件

• 加深了對$on, $emit使用的理解
• 發現了過渡效果中，對於多個元素過渡的應用場景