vue 使用v-model实现父子组件传值——子父组件同步更新

基于vue2和vue3两个版本的框架略显不同，所以我分开的来讲：

1、vue2

子组件（my-input.vue）：

<template>
    <input type="text" :value="name" @input="inputChange" />
</template>

<script>
export default {
    model: {
        prop: 'name',
        event: 'change'
    },
    props: {
        name: {
            type: String,
            default: ''
        }
    },
    methods: {
        inputChange(e) {
            this.$emit('change', e.target.value)
        }
    },
}
</script>

父组件：

<template>
    <my-input v-model="name" />
</template>

<script>
import MyInput from './my-input.vue'
export default {
    data() {
        return {
            name: '张三'
        }
    },
}
</script>

子组件：

1. 使用model的name和event来指定变量名和修改事件名；
2. 通过props接收一个值（举例name），
3. 通过this.$emit执行change事件进行对数据进行修改，实现数据双向绑定功能；

父组件：组件直接使用 v-model绑定变量即可

2、vue3

子组件：

<template>
    <input :value="modelValue" @input="updateValue" />
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
    modelValue: {
        type: String,
        required: true
    }
})
const emits = defineEmits(['update:modelValue'])

const updateValue = (event) => {
    emits('update:modelValue', event.target.value)
}
</script>

父组件：

<template>
    <div>
        <my-input type="text" v-model="name" />
    </div>
</template>

<script setup>
import MyInput from './my-input.vue'
let name = ref('')
</script>