一膨更、v-model 雙向綁定
1.v-model的理解：
1、v-model實現(xiàn)原理
2界睁、自定義組件使用v-model
2.v-model原理:
在vue中球昨，對<input>標簽使用v-model指令可以實現(xiàn)數(shù)據(jù)的雙向綁定；其原理是利用<input>標簽的value屬性和input事件封孙；
下面是我們使用v-model的方式：
<input v-model= "inputVal" type="text">
<div class="show-panel">{{inputval}}</div>
export default {
data() {
return {
inputVal: ' '
}
}
}
效果如下：
為了更好的理解v-model的原理，我們先模擬v-model的實現(xiàn):
利用vue模擬v-model的實現(xiàn)：
< input :value="inputVal" type="text" @input=" inputVal = $event.target.value">
<div class="show- panel">{{ inputVal }}</div>
為<input>標簽添加了value屬性以及input事件讽营，當我們在輸入內容時虎忌，觸發(fā)input事件，將<input>標簽中的值賦給inputVal變量橱鹏。
原生js模擬v-model的實現(xiàn)
<input id="input" type="text" oninput= "handleInput()">
<div class=" show- panel"></div>
let inputEle = document. queryselector( ' #input ' )
let showPanelEle = document. querySelector( ' .show- panel ' )
let inputval = ''
//將inputVal 的值賦給input標簽的value屬性
inputEle.value = inputVal
function handleInput() {
//獲取input標簽的value屬性值膜蠢，并賦給inputVal、 showPanelEle
inputval = inputEle.value
showPanelEle.innerHTML = inputEle.value
}
最開始將inputVal的值賦給<input>標簽的value屬性莉兰，當輸入內容時挑围，觸發(fā)input事件，獲取<input>標簽中最新的value屬性值糖荒，并將輸入值賦給inputVal變量和showPanelEle元素杉辙。
結合上面v-model的實現(xiàn)，可以看出v-model利用了表單元素（<input>）的value屬性和input事件捶朵，通過定義一個變量inputVal蜘矢，并將inputVal賦給表單元素的value屬性，當觸發(fā)表單元素的input事件時將最新的輸入值更新給變量inputval综看，進而實現(xiàn)雙向綁定品腹。
自定義組件使用v-model
我們知道表單元素本身具有input事件，在輸入內容時寓搬，可以觸發(fā)珍昨，但是在vue中，對于自定義組件句喷，當自身沒有input事件時镣典，還可以使用v-model嗎？
答案是可以使用的唾琼，對于自定義組件兄春，當我們使用v-model后，組件會自動多了一個value屬性值和名為input的自定義事件（這一切都是vue幫我們實現(xiàn)的）锡溯，具體如下：
如下是一個HelloWorld.vue組件：
// HelloWord.vue
< template>
<div>
<h1>{{ value }}</h1>
<button @click="handleClick" >點擊更新文本</button>
</div>
</template>
<script>
export default {
name: Helloworld,
props: {
value: {
type: string,
default: '',
}
},
methods: {
handleClick() {
},
this.$emit(' input', 'Hi, Vue')
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
<style>
我們在使用HelloWorld.vue組件時候用了v-model
<hello-world v-model="inputval">< /hello-world>
< script>
import HelloWorld from './components/Helloworld.vue
export default {
name : 'app',
components: {
HelloWorld
},
data() {
return {
inputval: 'hello, V-model'
}
}
</script>
我們在HelloWorld.vue中可以獲取一個名為value的屬性赶舆，當我們需要改變該屬性值時，通過觸發(fā)一個名為input的自定義事件即可祭饭，這就是在自定義組件中使用v-model的方法芜茵。
效果如下：
如果不使用v-model還想達到相同的效果，我們需要這樣做：
<hello-world :value="inputVal" @input="handleInput"></hello-world>
import HelloWorld from ' ./components /Helloworld.vue
export default {
name : 'app'倡蝙，
components: {
HelloWorld,
data() {
return {
inputval: ' hello, v-model '
}
},
methods: {
handleInput(val) {
this. inputVal = val
}
綜上所述九串，我們可以知道v-model是一種語法糖，它利用了標簽（表單元素、自定義元素）的value屬性和input事件（對于表單元素猪钮，input事件是本身原有的事件品山，對于自定義組件，input事件就是一個名為input的自定義事件）實現(xiàn)了雙向綁定烤低。
