v-model的深入
v-model是vue中的指令,结合表单元素使用(文本框,表单),主要作用是收集表单中的数据,属于组件通信方式的一种
"text" v-model="msg"> {{msg}}
此时输入框中的数据和右侧数据同步发送变化
不用v-model也可以实现,这种写法属于数据的单向绑定
"text" :value="msg">
在vue2中可以使用@input来实现数据的双向绑定
原生dom中有oninput事件,结合表单元素一起使用,主要作用是当表单元素的文本内容发生变化的时候就会触发一次回调-"text" :value="msg" @input="msg=$event.target.value">
此时就可以做到数据的双向绑定,也可以修改响应式的数据
接下来实现父子组件的数据同步也就是父子组件通信
引入一个子组件
"text" v-model="msg"> {{msg}}
"msg" @input="msg = $event"> //这里的value是props,用于父子组件通信
子组件就可以接收显示
"background: #ccc; height: 50px;">子组件
{{value}}
此时在给子组件添加一个@input,此时这里的@input并非原生DO买的input事件,属于自定义事件
"msg" @input="msg = $event">
子组件
"background: #ccc; height: 50px;">子组件
{{value}}
"text" :value="value" @input="$emit('input',$event.target.value)">
此时就可以实现父子组件的数据同步
也可以这样写
"msg" >
v-model实现的原理:是通过value和input事件实现的,而且还可以通过v-model实现父子组件数据的同步