一、v-model 的使用范围
二、v-model 基本用法
谈及Vue ,都会说到MVVM(Mode-View-View-Model)双向绑定。v-model 就是个很好的证明,input 输入的值,会立即显示到 span 上,
<template>
<div>
<input type="text" v-model="age" />
<br/>
<span>{{age}}</span>
</div>
</template>
<script>
export default {
data() {
return {
age: 0,
}
},
};
</script>
<style>
</style>
三、v-model 的实质
<template>
<div>
<input type="text" :value="age" @input="age = $event.target.value" />
<br/>
<span>{{age}}</span>
</div>
</template>
<script>
export default {
data() {
return {
age: 0,
}
},
methods:{
enter(e){
console.log(e);
}
}
};
</script>
<style>
</style>
四、自定义组件(Input) v-model 双向绑定
父组件:
- 定义了 value属性:用来传递值 给子组件;
- 定义了事件 input ;
<template>
<div>
<MyInput :value="age" @input="age = $event"></MyInput>
<span>父组件:{{age}}</span>
</div>
</template>
<script>
import MyInput from './MyInput.vue';
export default {
components:{
MyInput,
},
data() {
return {
age: 'er',
}
},
};
</script>
<style>
</style>
子组件:
- 相应的props接收父组件传递过来的值,value
<template>
<div>
子组件:
<!-- <input :value="value" @input="$emit('input',$event.target.value)"> -->
<!-- 两者效果相等 -->
<input :value="value" @input="handlerInput">
</div>
</template>
<script>
export default {
props:{
value:String,
},
methods:{
handlerInput(e){
// input 要与父组件定义的事件 同名;
this.$emit('input',e.target.value);
}
}
}
</script>
<style>
</style>
五、自定义check组件 v-model
父组件核心代码:
<!-- <MyCheckBox v-model="check"></MyCheckBox> -->
<MyCheckBox :checked="check" @change="check = $event"></MyCheckBox>
子组件:
<template>
<div>
子组件:
<input type="checkbox" :checked='checked' @change='handlerChange'>你今天开心嘛?
</div>
</template>
<script>
export default {
// model:{
// prop:'checked'
// },
props:['checked'],
methods:{
handlerChange(e){
this.$emit('change',e.target.checked);
}
}
}
</script>
<style>
</style>