看使用自定義事件的表單輸入元件這一節時,最初有不少困惑,反覆看了幾遍之後有點點眉目。**如下:
vue.component('currency-input',
this.$emit('input', number(formattedvalue))}}
})let evt1 = new vue(
})
對於這個案例來說,文件是想讓我們理解,在非表單元素中如何使用v-model並實現v-model的效果。(一般來說,v-model是針對表單的)id="evt1">
v-model="price">
currency-input>
div>
首先講述了v-model的原理。
v-model只是乙個語法糖,將某個變數繫結在value屬性上,並且監聽input事件。v-bind:value="something"
v-on:input="something = $event.target.value">
// 對於一般元件而言
v-bind:value="something"
v-on:input="something = arguments[0]">
custom-input>
非表單元素不能直接使用v-model的原因在於,不存在value屬性和input事件,所以通常也沒必要這麼寫。
但是當某個自定義元件內部包含表單元素時,可以通過自定義事件來模擬這種效果。(因為非表單元素不存在input事件,所以對於非表單元素來說,input就是自定義事件,可以通過this.em
it(『
inpu
t′)來
觸發)。
自定義組
件設定了
v−mo
del之
後,給子
元件傳入
了val
ue屬性
,自身綁
定了乙個
inpu
t自定義
事件。然
後子元件
的表單元
素中寫b
ind和
on:i
nput
,使用這
兩個而不
直接使用
v−mo
del的
原因在於
,想在i
nput
時,對數
據進行一
些處理,
比如格式
化,比如
觸發父組
件的in
put的
事件。a
rgum
ents
[0]就
是thi
s.e mi
t(『i
nput
′)來觸
發)。自
定義元件
設定了v
−mod
el之後
,給子組
件傳入了
valu
e屬性,
自身繫結
了乙個i
nput
自定義事
件。然後
子元件的
表單元素
中寫bi
nd和o
n:in
put,
使用這兩
個而不直
接使用v
−mod
el的原
因在於,
想在in
put時
,對資料
進行一些
處理,比
如格式化
,比如觸
發父元件
的inp
ut的事
件。ar
gume
nts[
0]就是
this
.emit時,傳進去的引數。
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 自定義事件
我們知道,子元件通過 prop 來接收父元件傳遞的資料。但子元件怎麼跟父元件通訊呢?這個時候 vue 的自定義事件系統就派得上用場了。每個 vue 例項都實現了事件介面,即 vue 的事件系統與瀏覽器的 eventtarget api 有所不同。儘管它們執行起來類似,但是 on 和 emit 並不是...