一、v-model 双向绑定
1.v-model的理解：
1、v-model实现原理
2、自定义组件使用v-model
2.v-model原理:
在vue中，对<input>标签使用v-model指令可以实现数据的双向绑定；其原理是利用<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的实现:
利用vue模拟v-model的实现：
< input :value="inputVal" type="text" @input=" inputVal = $event.target.value">
<div class="show- panel">{{ inputVal }}</div>
为<input>标签添加了value属性以及input事件，当我们在输入内容时，触发input事件，将<input>标签中的值赋给inputVal变量。
原生js模拟v-model的实现
<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属性，当输入内容时，触发input事件，获取<input>标签中最新的value属性值，并将输入值赋给inputVal变量和showPanelEle元素。
结合上面v-model的实现，可以看出v-model利用了表单元素（<input>）的value属性和input事件，通过定义一个变量inputVal，并将inputVal赋给表单元素的value属性，当触发表单元素的input事件时将最新的输入值更新给变量inputval，进而实现双向绑定。
自定义组件使用v-model
我们知道表单元素本身具有input事件，在输入内容时，可以触发，但是在vue中，对于自定义组件，当自身没有input事件时，还可以使用v-model吗？
答案是可以使用的，对于自定义组件，当我们使用v-model后，组件会自动多了一个value属性值和名为input的自定义事件（这一切都是vue帮我们实现的），具体如下：
如下是一个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的属性，当我们需要改变该属性值时，通过触发一个名为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的自定义事件）实现了双向绑定。
