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

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

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