先简单聊一下v-model的基本用法,这个是vue提供的一个语法糖.双向数据绑定.
<input v-model="name"> data() { return { name: ‘zs‘ } }
一般我们用在input,textarea中,用户输入内容可以改变对应的数据.等同于以下的代码
<input :value="name" @input="changeValue"> data() { return { name: ‘zs‘ } }, methods: { changeValue (e) { this.name = e.target.value } }
这样使用的话,比较有局限性,只能使用在input和textarea一些文本输入框中,其实在任意组件都可以使用v-model这个语法糖的,vue也是支持这样的写法
举个简单的例子,控制弹框的开关就可以使用v-model使代码看着更整洁
// 父组件 <popup v-model="show"></popup> <button @click="togglePopup"></button> data () { return { show: false } }, methods: { togglePopup() { this.show = !this.show } } // 子组件 popup props: [‘value‘],
methods: { close() { this.$emit(‘input‘, false) } }
同理,这样的写法等同于:
// 父组件 <popup :value="show" @input="(val) => this.show = val"></popup>
其他的写法不变的,这个时候又有个问题,v-model是默认的向子组件传递的value的参数,然后监听input事件去改变传递过来的值.
假设我子组件的value属性,或者input事件已经有了对应的值或者函数怎么办呢.这个时候vue也在实例上提供了一个model的属性为我们解决了这一问题
// 父组件 <popup v-model="show"></popup> <button @click="togglePopup"></button> data () { return { show: false } }, methods: { togglePopup() { this.show = !this.show } } // 子组件 popup model: { prop: ‘myValue‘, //这里的prop对应的props的值 event: ‘myEvent‘, // 这里的event对应的自定义的触发事件 } props: [‘myValue‘], // 这里的myValue可以任意命名了,但是需要跟model里面的prop对应 methods: { close() { // 这里就需要通过model里面的event的值来触发事件 this.$emit(‘myEvent‘, false) }
}
这样就可以实现我们的自定义的v-model,也是等同于下面的代码:
// 父组件 <popup :myValue="show" @myEvent="(val) => this.show = val"></popup>
综上:
1.v-model可以使用在任意父子组件中,不止是input或者textarea.
2.v-model是vue提供的一个语法糖,使用起来可以让代码看起来很整洁.当然不使用的话也是可以实现对应的效果的
原文：https://www.cnblogs.com/soilder/p/13708715.html