您好,登錄后才能下訂單哦!
這篇文章主要介紹“vue原生input輸入框原理是什么”,在日常操作中,相信很多人在vue原生input輸入框原理是什么問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”vue原生input輸入框原理是什么”的疑惑有所幫助!接下來,請跟著小編一起來學(xué)習(xí)吧!
首先我們來看一段代碼:
<input value="value">
這里是一個(gè)原生的input
輸入框,每一個(gè)原生的輸入框都會(huì)有一個(gè)value
的屬性來用于存儲(chǔ)用于輸入的最新的數(shù)據(jù)。
如果我們想要獲取到這個(gè)值我們可以通過input.target.value
或者通過$event.target.value
來獲取這個(gè)存儲(chǔ)的值。
只要用戶輸入了數(shù)據(jù),那么此時(shí)input
標(biāo)簽就會(huì)將輸入的數(shù)據(jù)放到這個(gè)value
中(新數(shù)據(jù)會(huì)覆蓋舊數(shù)據(jù),所以我們獲取到的都是最新的)。
現(xiàn)在我們來看上面的標(biāo)簽,我們?yōu)?code>input標(biāo)簽添加了一個(gè)value
屬性,并且賦值'value'
。其實(shí)在標(biāo)簽上設(shè)置value
屬性它的作用有兩個(gè):
在第一次創(chuàng)建input
標(biāo)簽的時(shí)候,將對應(yīng)的初始值展示到輸入框中 (在無該屬性使輸入框不展示任何數(shù)據(jù))
使用value
屬性的初始值來初始化input.target.value
(無該屬性時(shí)input.target.value
為空串)
上面的那段代碼的意思是通過添加value="value"
屬性,初始化input.target.value
的值并且將初始值展示到對應(yīng)的輸入框中
這里需要注明一點(diǎn),在后續(xù)用戶輸入的操作中,輸入框中的數(shù)據(jù)只是方便讓用戶看到自己輸入了什么僅此而已。 有人可以會(huì)有疑問,難道不是input.target.value
里是什么所以輸入框內(nèi)就顯示什么嗎?其實(shí)不是的。
輸入框顯示什么和 input.target.value
并沒有直接聯(lián)系,輸入框內(nèi)的顯示只是方便用戶自己看到自己輸入了什么。
小結(jié):
input
中的value
有兩種:value="xxx"
和 input.target.value
我們需要知道兩個(gè)分別有什么作用。在整個(gè)輸入顯示流程中, 他們分別扮演什么角色。
現(xiàn)在我們來看在vue
中的輸入框,首先我們來看一段代碼:
<input v-bind:value @input="value = $event.target.value" /> data(){ return { value:'123' } }
我們一般使用v-bind:value
來給Input
標(biāo)簽綁定一個(gè)vue
中的的,這里我們綁定的是this.value
。 在這里v-bind:value === :value="value"
。 這樣實(shí)現(xiàn)的原理比較簡單。
首先我們定義了this.value
因?yàn)閷?code>this.value綁定到了:value
上,所以初始時(shí)會(huì)在輸入框展示我們指定的 值,即'123'
。當(dāng)我們輸入數(shù)據(jù)之后,此時(shí)$envet.target.value
(這里的$event.target.value
就是input.target.value
)就會(huì)存儲(chǔ)我們最新的輸入的值,然后將最新的值賦值給this.value
。
因?yàn)?code>this.value變化了,此時(shí)vue
對頁面進(jìn)行更新,此時(shí)更新后的input
的:value
是最新值。
但是這里有一個(gè)問題,那就是<input>
并不會(huì)被銷毀重建,也就是說this.value = $event.target.value
只是改變了this.value
若別的地方引用了this.value
,那么就會(huì)同步改變。那么this.value
的更新對:value="value"
的影響是什么呢?其實(shí)沒有什么影響。
因?yàn)槲覀兦懊嬲f了,:value
的作用有兩個(gè):一是初始化input.value
的值,二是將初始值渲染到對應(yīng)的輸入框中。 在一開始將this.value
作為初始值給Input.value
和展示在框里,他的任務(wù)已經(jīng)完成了,后續(xù)的更改對:value
沒有一點(diǎn)關(guān)系。
其實(shí):value="value"
的唯一作用就是將this.value
作為初始值綁定和展示到input
上。
現(xiàn)在對于原始元素進(jìn)行算雙向數(shù)據(jù)綁定已經(jīng)完成。那么如何實(shí)現(xiàn)父組件和子組件之間的雙向數(shù)據(jù)綁定嗯? 此時(shí)我們需要在子組件中使用v-model。 關(guān)于 v-model 的使用這里不再贅述。這里只討論如何在自定義組件實(shí)現(xiàn) v-model。根據(jù)vue 的官網(wǎng)的描述,我們大概知道,v-model 的本質(zhì)就是語法糖,即:
<input type="text" v-model="name"> 相當(dāng)于: <input type="text" :value="name" @input="name = $event.target.value">
vue
監(jiān)聽輸入框輸入行為然后改變對應(yīng)的值。 如果對子組件進(jìn)行雙向數(shù)據(jù)綁定該如何實(shí)現(xiàn)呢?這里的雙向數(shù)據(jù)綁定指的是父組件將值傳遞給子組件使用,并且子組件可以改變父組件的值 其實(shí)上述的雙向綁定可以通過v-bind:propName.sync = 'xxx'
來實(shí)現(xiàn)。 除了以上的方式,并且Vue
還給我們提供了另一種方式:
<!-- 父組件.vue --> <child-component :propName="data" @change="change" /> export default { data(){ data:'123' }, methods:{ change(value){ this.data = value } } }
//在組件中如何想要改變父組件的值,那么直接出發(fā)對應(yīng)的事件即可: this.$emit('change', newValue )
在vue
中,它將上述的方法進(jìn)行了簡化,我們可以使用v-model
來對子組件進(jìn)行雙向數(shù)據(jù)綁定。例如:
<child-component v-model="pageTitle" /> <!-- 是以下的簡寫: --> <child-component :value="pageTitle" @input="pageTitle = $event" />
在默認(rèn)情況下v-model
的觸發(fā)事件名稱為input
。 子組件想要使用的話,需要定義一個(gè)名為value
的prop
才能使用。 而在子組件中更改該值,只需要定義一個(gè)函數(shù),有必要的時(shí)候執(zhí)行 this.$emit('input', newValue)
即可。
這里的newValue
就是$event
。 這樣就可以改變對應(yīng)的值。 當(dāng)然除了默認(rèn)的value
和input
的命名,vue
還給我們提過了更加靈活的方式。
<!-- 父組件 --> <child-component v-model="pageTitle" />
//子組件 export default { model: { prop: 'title', //這里相當(dāng)于別名,這里可以起其他名稱 event: 'change' //這里相當(dāng)于事件的別名,這里可以起其他名稱 }, props: { // 這將允許 `value` 屬性用于其他用途 value: String, // 使用 `title` 代替 `value` 作為 model 的 prop title: { type: String, default: 'Default title' } } }
當(dāng)我們想在子組件中改變傳入的值,那么直接可以this.$emit('change', newValue)
所以,在這個(gè)例子中 v-model
是以下的簡寫:
<child-component :title="pageTitle" @change="pageTitle = $event" />
其實(shí)本質(zhì)上,項(xiàng)目中的twowayFactor
這個(gè)混入配置類,他本質(zhì)上就是做了上面的操作。
@Prop() @Model('valueChanged') bindValue!: T;
這樣做的目的是將v-model
傳入的prop
改為bindValue
。 然后將默認(rèn)事件的名稱從input
改為了valueChange
。 接著設(shè)置get/set
get currentValue() { return this.bindValue; } set currentValue(value) { this.$emit('valueChanged', value); }
這樣做的目的是數(shù)據(jù)本地化。 在組件內(nèi)部定義一個(gè)currentValue
然后為該值設(shè)置get
,當(dāng)訪問currentValue
等價(jià)于訪問v-model
的prop
。 然后設(shè)置set
。當(dāng)改變currentValue
的值時(shí),此時(shí)就會(huì)觸發(fā)對應(yīng)的事件。 當(dāng)觸發(fā)之后父組件中的值就會(huì)變化。這就實(shí)現(xiàn)了雙向數(shù)據(jù)綁定。
我們可以看到,其實(shí)this.currentValue
的作用就是v-model
操作的語法糖。 它并沒有什么特別之處,只是將v-model
傳入的數(shù)據(jù)的訪問和更改簡單化了,都集中與一個(gè)值this.currentValue
。
到此,關(guān)于“vue原生input輸入框原理是什么”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí),請繼續(xù)關(guān)注億速云網(wǎng)站,小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。