v-model的双向数据绑定实现原理(附:案例)

77 阅读1分钟

原理:

  • 类型一

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