Vue 進階教程之:詳解 v-model
分享
Vue 官網教程上關於 v-model
的講解不是十分的詳細,寫這篇文章的目的就是詳細的剖析一下, 並介紹 Vue 2.2 v-model
改進的地方,然後穿插的再說點 Vue 的小知識。
在 Vue 中,有許多方法和 Angular 相似,這主要是因為 Angular 是 Vue 早期開發的靈感來源。然而,Augular 中存在許多問題,在 Vue 中已經得到解決。
v-model 用在 input 元素上時
v-model
雖然很像使用了雙向數據綁定的 Angular 的 ng-model
,但是 Vue 是單項數據流,v-model
只是語法糖而已:↓
<input v-model="sth" />
<input v-bind:value="sth" v-on:input="sth = $event.target.value" />
第一行的代碼其實只是第二行的語法糖。然後第二行代碼還能簡寫成這樣:↓
<input :value="sth" @input="sth = $event.target.value" />
要理解這行代碼,首先你要知道 input
元素本身有個 oninput 事件,這是 HTML5 新增加的,類似 onchange
,每當輸入框內容發生變化,就會觸發 oninput
,把最新的value
傳遞給 sth
。
如果你不知道 $event 是從哪來的,那你需要點擊它再復習一下文檔。
我們仔細觀察語法糖和原始語法那兩行代碼,可以得出一個結論:
在給 <input /> 元素添加 v-model 屬性時,默認會把 value 作為元素的屬性,然後把 ‘input‘ 事件作為實時傳遞 value 的觸發事件
v-model 用在組件上時
v-model
不僅僅能在 input
上用,在組件上也能使用,下面是一個和 Vue 官網教程類似的例子(在看這個例子時我們要考慮兩個問題):
實例演示.gif
父組件的 price
的初始值是 100,更改子組件的值能實時更新父組件的 price
<div id="demo">
<currency-input v-model="price"></currentcy-input>
<span>{{price}}</span>
</div>
<script src="https://cdn.bootcss.com/vue/2.3.0/vue.js"></script>
<script>
Vue.component(‘currency-input‘, {
template: `
<span>
<input
ref="input"
:value="value"
<!--為什麽這裏把 ‘input‘ 作為觸發事件的事件名?`input` 在哪定義的?-->
@input="$emit(‘input‘, $event.target.value)"
>
</span>
`,
props: [‘value‘],// 為什麽這裏要用 value 屬性,value在哪裏定義的?貌似沒找到啊?
})
var demo = new Vue({
el: ‘#demo‘,
data: {
price: 100,
}
})
</script>
如果你知道這兩個問題的答案,那麽恭喜你真正掌握了 v-model
,如果你沒明白,那麽可以看下這段代碼:↓
<currency-input v-model="price"></currentcy-input>
<!--上行代碼是下行的語法糖
<currency-input :value="price" @input="price = arguments[0]"></currency-input>
-->
現在你知道 value
和 input
從哪來的了吧。與上面總結的類似:
給組件添加 v-model 屬性時,默認會把 value 作為組件的屬性,然後把 ‘input‘ 值作為給組件綁定事件時的事件名
v-model 的缺點和解決辦法
在創建類似復選框或者單選框的常見組件時,v-model
就不好用了。
<input type="checkbox" v-model="sth" />
v-model
給我們提供好了 value
屬性和 oninput
事件,但是,我們需要的不是 value
屬性,而是 checked
屬性,並且當你點擊這個單選框的時候不會觸發 oninput
事件,它只會觸發 onchange
事件。這就尷尬了??
因為 v-model
只是用到了 input 元素上,所以這種情況好解決:↓
<input type="checkbox" :checked="status" @change="status = $event.target.checked" />
當 v-model
用到組件上時:↓
<my-checkbox v-model="foo"></my-checkbox>
Vue.component(‘my-checkbox‘, {
tempalte: `<input
type="checkbox"
@change="$emit(‘input‘, $event.target.checked)"
:checked="value"
/>`
props: [‘value‘],
})
在 Vue 2.2 版本,你可以在定義組件時通過 mode l選項的方式來定制 prop/event:↓
<my-checkbox v-model="foo"></my-checkbox>
Vue.component(‘my-checkbox‘, {
tempalte: `<input
type="checkbox"
<!--這裏就不用 input 了,而是 balabala-->
@change="$emit(‘balabala‘, $event.target.checked)"
:checked="value"
/>`
props: [‘checked‘], //這裏就不用 value 了,而是 checked
model: {
prop: ‘checked‘,
event: ‘balabala‘
},
})。
學習過程中遇到什麽問題或者想獲取學習資源的話,歡迎加入學習交流群
343599877,我們一起學前端!
Vue 進階教程之:詳解 v-model