組件中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的限制了。