Vue v-model语法糖
2020-02-17 本文已影响0人
wdapp
v-model语法糖
我们可以使用v-model对input进行双向绑定
<input v-model="message"></input>
v-model 语法糖本质是 :value="message" @input="onInput"
<input :value="message" @input="onInput"></input>
如果使子组件接收 props: value 并且 $emit('input', value) 事件，那么就直接使用v-modle语法糖
<div id="app">
{{message}}
<field :value="message" @input="onInput"></field>
<field v-model="message"></field>
</div>
:value="message" @input="onInput" 与 v-model="message" 效果相同
field子组件：
Vue.component('field', {
props: {
value: {
type: String
}
},
template: `
<input :value="value" @input="onInput">
`,
methods: {
onInput (e) {
var value = e.target.value
this.$emit('input', value)
}
}
})
vue实例：
var app = new Vue({
el: '#app',
data: {
message: 'hello vue !'
},
methods: {
onInput (val) {
this.message = val
}
}
})
model
如果使用v-model想要监听checkbox的onchange事件，则需要model来自定义v-model语法糖
Vue.component('checkbox', {
model: {
prop: 'checked',
event: 'change'
},
props: {
checked: {
type: Boolean,
default: false
}
},
template:
`
<input type="checkbox" @input="onInput" @change="onChange"/>
`,
methods: {
onInput (e) {
console.log('onInput', e)
},
onChange (e) {
console.log('onChange', e)
this.$emit('change', e.target.checked)
}
}
})
由于v-model需要在props里面定义value来接受值，emit input来更新值，所以需要model来重新自定义prop和event
使用checkbox组件
<checkbox v-model="toggle"></checkbox>
<p v-show="toggle">hello</p>
vue实例：
var app = new Vue({
el: '#app',
data: {
message: 'hello vue !',
toggle: false
},
methods: {
onInput (val) {
this.message = val
}
}
})
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-model语法糖</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
{{message}}
<field :value="message" @input="onInput"></field>
<field v-model="message"></field>
<checkbox v-model="toggle"></checkbox>
<p v-show="toggle">hello</p>
</div>
<script>
/**
* v-model 语法糖本质是 :value="message" @input="onInput"
* 如果使用v-modle语法糖，则需要子组件接收 props: value 并且 $emit('input', value) 事件
*/
Vue.component('field', {
props: {
value: {
type: String
}
},
template: `
<input :value="value" @input="onInput">
`,
methods: {
onInput (e) {
var value = e.target.value
this.$emit('input', value)
}
}
})
/**
* model
* 如果使用v-model想要监听checkbox的onchange事件，则需要model来自定义v-model语法糖
* 由于v-model需要在props里面定义value来接受值，emit input来更新值，所以需要model来重新自定义prop和event
*/
Vue.component('checkbox', {
model: {
prop: 'checked',
event: 'change'
},
props: {
checked: {
type: Boolean,
default: false
}
},
template:
`
<input type="checkbox" @input="onInput" @change="onChange"/>
`,
methods: {
onInput (e) {
console.log('onInput', e)
},
onChange (e) {
console.log('onChange', e)
this.$emit('change', e.target.checked)
}
}
})
var app = new Vue({
el: '#app',
data: {
message: 'hello vue !',
toggle: false
},
methods: {
onInput (val) {
this.message = val
}
}
})
</script>
</body>
</html>
