v-model介绍
v-model
是Vue的一个很大的特色,可以实现双向数据绑定。v-model本质上是语法糖,它负责监听用户的输入事件以更新数据。
v-model
在内部使用不同的属性为不同的输入元素抛出不同的事件:
text
和textarea
使用value
属性和input
事件;checkbox
和radio
使用checked
属性和change
事件;select
字段将value
作为prop
并将change
作为事件。
如何巧妙利用 v-model实现父子组件传值
通常子组件某个变量更新,并需要告知父组件时,需要子组件触发事件并父组件监听该事件。
但是熟悉上面 v-model 的实现原理后,我们可以巧妙地运用这一原理(v-model 在内部使用不同的属性为不同的输入元素抛出不同的事件)。
方法总结:
子组件设value
为props
属性,并且不主动改变value
值子组件通过this.$emit('input', 'updateValue')
将updateValue
值传给父组件父组件通过v-model="localValue"
绑定一个本地变量,即可实现子组件value
值与父组件updateValue
值同步更新
举例:
子组件
子组件,包含一个button,并且将 value 属性设为props( 因为v-model使用的是 value属性 )。
点击button时,sum值加1,同时通过 this.$emit(‘input’, ++sum) 将更新后的值传给父组件(前提:传给父组件的值一定是你想赋给 value 的)
<template><div><button @click="increase" style="border: 1px solid black">increase</button></div></template><script>let sum = 0export default {name: 'vmodel',props: {value: {type: Number,default: 0}},methods: {increase () {this.$emit('input', ++sum)console.log('value1', this.value)setTimeout(() => {console.log('value2', this.value)}, 50)}}}</script>
父组件
父组件中,通过 v-model 绑定一个本地变量,即可实现子父组件同步更新
<div><increase v-model="rangeValue"></increase><p>value:{{rangeValue}}</p></div><script>data () {return {rangeValue: 0}}</script>
实际上,这个过程是首先子组件通过$emit('input')
更新父组件的本地变量,然后子组件中的value
属性通过props
得以更新
总结
这种方式尤其适合子父组件传参的情况(子父组件同步更新)