Vue文件 使用自定義事件的表單輸入元件案例解析

2021-08-18 03:40:30 字數 1963 閱讀 2586

看使用自定義事件的表單輸入元件這一節時,最初有不少困惑,反覆看了幾遍之後有點點眉目。

**如下:

vue.component('currency-input', 

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

})let evt1 = new vue(

})

id="evt1">

v-model="price">

currency-input>

div>

對於這個案例來說,文件是想讓我們理解,在非表單元素中如何使用v-model並實現v-model的效果。(一般來說,v-model是針對表單的)

首先講述了v-model的原理。

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事件。

非表單元素不能直接使用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 並不是...