组件中v-model的使用：
v2.2以前的版本是这样应用的，
<body>
<div id="app">
<h1>组件中v-model的使用</h1>
<h1>1,子组件中props要有value属性，2:子组件动态绑定value至props,3，子组件触发input事件后触发$emit</h1>
<button-counter v-model="message"></button-counter>
{{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//定义组件
Vue.component('button-counter',{
data: function(){ //data必须要return。
return {
count:4,
}
},
props:['value'],
template:'<input v-bind:value="value" @input="child">',
methods:{
child: function(event){
this.$emit('input',event.target.value)
}
}
})
var app = new Vue({
el: '#app',
data: {
message: 123
},
})
</script>
</body>
但是呢，像单选框、复选框等类型的输入控件可能会将 value 特性用于不同的目的，所以v2.2+版本后可以使用model属性来书写v-model
<body>
<div id="app">
<h1>组件中v-model的使用</h1>
<h1>1,子组件中props要有**属性，2:子组件动态绑定**至props,3，子组件触发**事件后触发$emit</h1>
<button-counter v-model="message"></button-counter>
{{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//定义组件
Vue.component('button-counter',{
modle: {
//prop: 'changed',
prop: 'nice'
event: 'change'
},
data: function(){ //data必须要return。
return {
count:4,
}
},
props:['chnaged'],
template:'<input v-bind:changed="nice" @change="child">',
methods:{
child: function(event){
this.$emit('input',event.target.value)
}
}
})
var app = new Vue({
el: '#app',
data: {
message: 123
},
})
</script>
</body>
这样组件中使用v-model就不受value和input的限制了。