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>或<textarea>元素的值變更時，DOM input 事件會同步觸發。 (對於type = checkbox 或type = radio 的輸入元素，當使用者單擊控制項時，輸入事件不會觸發，因為value屬性不會更改。) 此外，當內容更改時，它會在contenteditable 的編輯器上觸發。在這種情況下，事件目標是編輯主機元素。如果有兩個或多個具有 contenteditable 的元素為真，「編輯主機」是其父級不可編輯的最近的祖先元素。同樣，它也會在 designMode 編輯器的根元素上觸發。
具體見:MDN的input事件
接受一個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事件。所以我們可以利用這個特性去做一些事情。
將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', 值*1)
...updateValue (value) { this.$refs.input.value = value + 1; // 触发组件上绑定的input事件,以实现value同步 this.$emit('input', value*1)},...這下就實現了值的同步問題。
以上是組件中的v-model實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
