父子组件通信之v-model

我们都知道父子组件通信有很多方法，v-model就是其中一种，v-model可以实现数据双向绑定，

v-model就是v-bind 和@input事件的语法糖 意思就是 v-bind:value 和 v-on:input的合成

下面给大家看vue2.0版本的v-model实现父子组件通信的代码，以便大家理解

父组件中

父组件中使用v-model来绑定

//父组件
<template>
  <div>
      <my-input v-model="title"></my-input>
  </div>
</template>

<script>

import myInput from "@/components/myInput";

export default {
  data() {
    return {
      title: "123",
    };
  },
  components: {
    myInput
  },
  methods: {
     
  },
 
};
</script>

子组件中

子组件中通过props接受，并设置v-on:input (@input)事件和v-bind:value (:value)

@input事件就是监听事件通过输入值的变化来触发

 //子组件
<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>

以上就是我对vue2.0的v-model父子组件通信的演示代码

我们平时不仅会使用vue2.0还会使用vue3.0 下面就是vue3.0的v-model父子组件通信

父组件

// 父组件
<template>
  <div>
      <my-input v-model="form.name"></my-input>
  </div>
</template>

<script>
import myInput from "@/components/myInput";
export default {
  setup(props) {
    const data= reactive({
        form:{
            name:'',
        },
    })
    return {
       ...toRefs(data),
    };
  },
  components: {
    myInput,
  },
};
</script>

子组件

<template>
    <div>
       <input :value="modelValue" @input="$emit('update:modelValue',$event.target.value)">
    </div>
</template>
<script>
export default {
    props:{
      modelValue:[String],
    },
    setup(props) {
        
    }
}
</script>

一些须知我们可以通过vue3官方文档来了解