父组件:
<div id="father">
这里是父组件 父组件的v-model:{{isShow}}
<child :test="aaa" v-model="isShow"></child>
</div>
子组件:
props:{
value:{//可以直接通过value获取 在父页面v-model绑定给子组件上的值
type:Boolean,
default:true
},
}
官方解释:
<input v-model="searchText">
等价于
<input :value="searchText" @input="searchText=$event.target.value">
用在组件上时
<custom-input :value="searchText" @input="searchText=$event"></custom-input>
所以可以这样用:
父组件中:
<child v-model="number"></child>
子组件
props:{value:{}}
<div @click="$emit('input',value+1)">//通过input事件来使父组件的number+1
解释说明:
通过v-bind把父组件的数据绑定到了子组件的props属性中,而在props上默认用value取值,然后通过$emit触发事件input,因为v-model绑定的事件是input,故在子组件上触发了父组件的input事件,通过触发事件来进行传值,实现了父子组件数据的双向绑定,相对于直接使用v-bind以及自定义事件代码量有所减少
原理:
首先我们为每个vue属性用Object.defineProperty()实现数据劫持,为每个属性分配一个订阅者集合的管理数组dep;然后在编译的时候在该属性的数组dep中添加订阅者,v-model会添加一个订阅者,{{}}也会,v-bind也会,只要用到该属性的指令理论上都会,接着为input会添加监听事件,修改值就会为该属性赋值,触发该属性的set方法,在set方法内通知订阅者数组dep,订阅者数组循环调用各订阅者的update方法更新视图。