v-model的神奇
html
<div id="app">
<input v-model="poin">
{{ poin }}
</div>
js
new Vue({
el:'#app',
data:{
poin:'zqz'
}
})
一旦我們輸入的值發生變化,data中的poin值也會發生變化。
理論上data中的值發生變化是會出發事件的，但是我們沒看見？
其實在vue的文檔中有說明:
<input v-model="something">
是下面的語法糖
<input v-bind:value="something" v-on:input="something = $event.target.value">
每次我們輸入的時候觸發了input事件，input綁定了內聯函數,從而改變了something的值。
你好奇input事件是什么？
當
<input>或<textarea>元素的值更改時，DOM input 事件會同步觸發。(對於 type = checkbox 或 type = radio 的輸入元素，當用戶單擊控件時，輸入事件不會觸發，因為value屬性不會更改。) 此外，當內容更改時，它會在 contenteditable 的編輯器上觸發。在這種情況下，事件目標是編輯主機元素。如果有兩個或多個具有 contenteditable 的元素為真，“編輯主機”是其父級不可編輯的最近的祖先元素。同樣，它也會在 designMode 編輯器的根元素上觸發。
具體見:MDN的input事件
組件中的v-model
組件的v-model 生效原則
- 接受一個
value屬性 - 在有新的
value時觸發input事件
我們先看一下代碼
el-input.vue
<template>
<div>
<p>input的封裝</p>
<input type="text"
ref="input"
:value="value"
@input="updateValue($event.target.value)"
@focus="selectAll"
>
</div>
</template>
<script>
export default {
name: 'el-input',
props: {
value: {
type: Number,
default: 0
},
},
methods: {
// 每次都會加一
updateValue (value) {
this.$refs.input.value = value + 1;
},
selectAll(event) {
setTimeout(function () {
event.target.select()
}, 0)
}
}
}
</script>
<style>
</style>
將這個組件在Tom.vue中使用
<style>
</style>
<template>
<!-- 在父組件中使用 -->
<div>
<v-el-input></v-el-input>
</div>
</template>
<script>
import vElInput from './el-input.vue'
export default {
name: 'tom',
components: {
vElInput
}
}
</script>
每次使用的時候都會在后面加個1
但是問題來了，我們要如何在Tom.vue中取到這個值呢？
-
方法一：使用事件 但是感覺有點曲線救國
-
方法二：使用v-model
這里就體現出了v-model的強大了，因為上面的語法糖，自動的綁定了input事件。所以我們可以利用這個特性去做些事情。
給組件綁定v-model
將Tom.vue的代碼修改一下
<template>
<!-- 在父組件中使用 -->
<div>
<v-el-input v-model="eleValue"></v-el-input>
eleValue的值:{{ this.eleValue }}
</div>
</template>
<script>
import vElInput from './el-input.vue'
export default {
name: 'tom',
components: {
vElInput
},
data () {
return {
eleValue: 666 //設置一個默認值
}
}
}
</script>
初始狀態
輸入后的狀態
然后當我們輸入的值發生變化的時，我們預想的eleValue依舊沒有發生變化,而el-input.vue中的value確發生了變化
也是就是說value發生變化后沒有傳遞(同步)到父組件中,這也就是vue1中的.sync的用處，而在vue2中已經廢棄了。
修改el-input.vue代碼，增加this.$emit('input', value*1)
...
updateValue (value) {
this.$refs.input.value = value + 1;
// 觸發組件上綁定的input事件,以實現value同步
this.$emit('input', value*1)
},
...
這下就實現了值的同步問題。