用v-model实现数据的双向绑定,主要用于父子组件中,其中可作用于表单元素,如input
、textarea
、select
。
1.v-model实现原理
v-model其实是语法糖,把背后两个操作合并为一个指令
<input type="text" v-model="value">
<!-- 等同于 -->
<input type="text" :value="value" @input="value =$event.target.value">
2.在父子组件中实现数据的双向绑定
父组件
<template>
<div class="Home">
<v-model v-model="value" ></v-model>
<!-- 等同于 -->
<!-- <v-model :value="value" @input="value =$event.target.value"></v-model> -->
<div>{{value}}</div>
</div>
</template>
子组件
<template>
<div class="VMoldel">
<input :value="value" @input="onInput" />
</div>
</template>
<script>
export default {
name: 'VMoldel',
props: {
value: String
},
methods: {
onInput (e) { //调用父组件的input方法。
this.$emit('input', e.target.value)
}
},
}
</script>
3.使用model
一个组件上的 v-model
默认会利用名为 value
的 prop
和名为 input
的事件,但是像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的。model
选项可以用来避免这样的冲突:
不修改父组件,在子组件中使用model
<template>
<div class="VMoldel">
<input :value="changeValue" @change="onChange" />
<button>添加</button>
</div>
</template>
<script>
export default {
name: 'VMoldel',
props: {
changeValue: String
},
model: { //props和event可任意修改,元素input的change和input方法的区别只在于组件
props: 'changeValue',
event: 'change'
},
methods: {
onChange (e) { //调用父组件的change方法。
this.$emit('change', e.target.value)
}
},
}
</script>
4.结语
真正的使用双向绑定会给维护带来一定的困难,所以推荐使用 .sync
修饰符,可查看使用方法。