Vue 自定義事件

2021-09-28 22:21:36 字數 3185 閱讀 1159

我們知道，子元件通過 prop 來接收父元件傳遞的資料。但子元件怎麼跟父元件通訊呢？這個時候 vue 的自定義事件系統就派得上用場了。

每個 vue 例項都實現了事件介面，即：

vue 的事件系統與瀏覽器的 eventtarget api 有所不同。儘管它們執行起來類似，但是 $on 和 $emit 並不是addeventlistener 和 dispatchevent 的別名。

另外，父元件可以在使用子元件的地方直接用 v-on 來監聽子元件觸發的事件。

不能用 $on 監聽子元件釋放的事件，而必須在模板裡直接用 v-on 繫結，參見下面的例子。

}


vue.component('button-counter', }',


data: function () 


},methods: 


},})new vue(,


methods: 


}})
在本例中，子元件已經和它外部完全解耦了。它所做的只是報告自己的內部事件，因為父元件可能會關心這些事件。請注意這一點很重要。

這裡有乙個如何使用載荷 (payload) 資料的示例：

}


vue.component('button-message', 


},methods: )


}}})


new vue(,


methods: 


}})
第二個示例的重點在於子元件仍然是完全和外界解耦的。

你可能想在某個元件的根元素上監聽乙個原生事件。可以使用 修飾符 .native。

在一些情況下，我們可能會需要對乙個 prop 進行「雙向繫結」。事實上，這正是 vue 1.x 中的 .sync 修飾符所提供的功能。當乙個子元件改變了乙個帶 .sync 的 prop 的值時，這個變化也會同步到父元件中所繫結的值。這很方便，但也會導致問題，因為它破壞了單向資料流。由於子元件改變 prop 的**和普通的狀態改動**毫無區別，當光看子元件的**時，你完全不知道它何時悄悄地改變了父元件的狀態。這在 debug 複雜結構的應用時會帶來很高的維護成本。

這正是我們在 2.0 中移除 .sync 的理由。但是在 2.0 發布之後的實際應用中，我們發現 .sync 還是有其適用之處，比如在開發可復用的元件庫時。我們需要做的只是讓子元件改變父元件狀態的**更容易被區分。

從 2.3.0 起我們重新引入了 .sync 修飾符，但是這次它只是作為乙個編譯時的語法糖存在。它會被擴充套件為乙個自動更新父元件屬性的 v-on ***。

如下**

會被擴充套件為：

bar = val">
當子元件需要更新 foo 的值時，它需要顯式地觸發乙個更新事件：

this.$emit('update:foo', newvalue)
當使用乙個物件一次性設定多個屬性的時候，這個 .sync 修飾符也可以和 v-bind 一起使用：

這個例子會為 foo 和 bar 同時新增用於更新的 v-on ***。

自定義事件可以用來建立自定義的表單輸入元件，使用 v-model 來進行資料雙向繫結。

必須牢記：

是以下示例的語法糖：

所以，在元件中使用時，它相當於下面的簡寫：

所以要讓元件的 v-model 生效，它應該：

來看乙個非常簡單的貨幣輸入的自定義控制項：

vue.component('currency-input', 


// 通過 input 事件帶出數值


this.$emit('input', number(formattedvalue))


}}})
上面的例子還是比較初級的。比如，使用者居然可以輸入多個小數點或句號。

因此我們需要乙個複雜一些的例子，下面是乙個更加完善的貨幣過濾器：

label="price" 


v-model="price"


>


total: $}


vue.component('currency-input', }\$\\


\  ',


props: ,


label: 


},mounted: function () ,


methods: 


this.$emit('input', result.value)


},formatvalue: function () ,


selectall: function (event) , 0)


}}})


new vue(,


computed: 


}})
預設情況下，乙個元件的 v-model 會使用 value prop 和 input 事件。但是諸如單選框、核取方塊之類的輸入型別可能把 value 用作了別的目的。model 選項可以避免這樣的衝突：

vue.component('my-checkbox', ,


props: ,


// ...


})
上述**等價於：

"


value="some value">
注意： 仍然需要顯式宣告 checked 這個 prop。

有時，非父子關係的兩個元件之間也需要通訊。在簡單的場景下，可以使用乙個空的 vue 例項作為事件匯流排：

var bus = new vue()
// 觸發元件 a 中的事件


bus.$emit('id-selected', 1)
// 在元件 b 建立的鉤子中監聽事件


bus.$on('id-selected', function (id) )
在複雜的情況下，我們應該考慮使用專門的狀態管理模式。

Vue自定義事件

父元件使用props傳遞資料給子元件，子元件怎麼跟父元件通訊呢？這時，vue的自定義事件就派上用場了。本文將詳細介紹vue自定義事件 每個 vue 例項都實現了事件介面 events inte ce 即 使用 on eventname 監聽事件 使用 emit eventname 觸發事件 注意 v...

vue 自定義事件

vue中自定義的事件，不同於元件和props屬性，事件名沒有任何的大小寫轉換，觸發的事件必須完全匹配這個事件所用的名稱，所以在使用this.emit clicka data 時，clicka必須與定義的事件名一致 當引數為物件時，父元件接收時以及子元件傳參時，最好使用json.parse json....

vue自定義事件

父元件使用props傳遞資料給子元件，子元件怎麼跟父元件通訊呢？這時，vue的自定義事件就派上用場了。子元件 子元件通過 emit可以觸發事件，第乙個引數為要觸發的事件，第二個事件為要傳遞的資料 父元件 父元件可以在使用子元件的地方直接用 v on 來監聽子元件觸發的事件 它只是作為乙個編譯時的語法...