原理:
- 类型一
原生input元素的类型是text/textarea,那么是使用它的value属性和input事件来实现双向数据绑定。
- 类型二
原生input元素的类型是radio/checkbox,那么是使用它的checked属性和change事件来实现双向数据绑定。
- 类型三
select,option则是绑定selected属性和change事件。
v-model的实现案例。
<input v-model="value" />
//实际上等于
<input v-bind:value="value" @input="value = $event.target.value" />
根据v-model双向数据绑定实现父子组件的项目实例
父组件:引入子组件
//父组件
<template>
<div>
<my-input v-model="title"></my-input>
</div>
</template>
<script>
import myInput from "@/components/myInput";
export default {
data() {
return {
title: "什么妖魔鬼怪什么美女画皮",
};
},
components: {
myInput
},
methods: {
},
};
</script>
子组件
//子组件
<template>
<div>
<input type="text" @input="change" :value="value">
</div>
</template>
<script>
export default {
props:["value"],
data(){
return{
}
},
methods: {
change(e){
console.log(e.target.value);
this.$emit('input',e.target.value);
},
},
}
</script>