v-model
- Vue中v-model能实现数据的双向绑定,实现父子组件通信...
1.v-model用在input元素上
-
虽然Vue是单项数据流,v-model只是一个语法糖,实现双向数据的绑定:
<input v-model="msg" /> <input v-bind:value="msg" @input="msg = $event.target.value" />
-
第一行代码等价于第二行
input 元素本身有个 oninput 事件,这是 HTML5 新增加的,类似 onchange ,每当输入框内容发生变化,就会触发 oninput ,把最新的value传递给 msg
给input标签添加v-model属性,默认会把value作为元素的属性,然后把input事件作为实时传递value的触发事件
-
-
小示例:
<div id="exp"> <input type="text" v-model="msg"> <span>{{msg}}</span> </div> <script> var vm = new Vue({ // el限制一个vue实例的管理范围。 el:"#exp", data:{ msg:"" } }); </script>
2.v-model用在组件上
-
当然v-model还可以用在组件上,更改子组件的值父组件的price也实时变化,以官方例子:
<div id="exp2"> <!-- 等价于 v-bind:value="price" @input="price = arguments[0]"--> <currency-input v-model="price"></currency-input> <span>{{price}}</span> </div>
// 定义组件 Vue.component('currency-input',{ props:['value'], template:` <input ref="ipt" :value="value" @input="$emit('input',$event.target.value)"> ` }); var vm2 = new Vue({ el:"#exp2", data:{ price:100 } })
3.v-model缺点和解决方法
-
在创建类似复选框或者单选框的常见组件时,v-model就不好用了。
-
在input框解决方式
<div id="exp3"> <input type="checkbox" :checked="status" @change="status=$event.target.checked"> </div> <script> var vm3 = new Vue({ el:"#exp3", data:{ status:false }, }) </script>
-
当v-model用在组件上:
<div id="exp4"> <my-checkbox v-model="cks"></my-checkbox> </div> <script> Vue.component('my-checkbox',{ props:['value'], template: ` <input type="checkbox" :checked="value" @change="$emit('input',$event.target.checked)"> ` }); var vm4 = new Vue({ el:"#exp4", data:{ cks:false } }) </script>