v-model的双向数据绑定实现原理（附：案例）

原理：

• 类型一

原生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>