Vue3中 v-model 实现父子组件数据通信双向绑定

如果使用 v-model 给子组件绑定一个数据, 例如v-model="msg", 那么子组件 props 传进来的数据为modelValue, 要手动触发的事件为update:modelValue

父组件

<template>
    <div class="hello">
        <h1>{{ msg }}</h1>
        <test v-model="msg"></test>
    </div>
</template>

子组件

<template>
    <div>
        请输入
        <input
            type="text"
            :value="modelValue"
            @input="$emit('update:modelValue', $event.target.value)"
        />
    </div>
</template>

<script>
    export default {
        props: ["modelValue"],
    };
</script>

vue3 中, 可以使用 v-model 绑定多个数据, 使用v-model:name="name" v-model:age="age"的形式绑定数据, 子组件的 props 收到的数据为v-model:后面的名称, 如果要更新这个数据, 需要触发自定义事件update:xxx的形式

// 父组件
<script setup lang="ts">
    import test from "./components/test.vue";
    import { ref } from "vue";
    const name = ref("tim");
    const age = ref(19);
</script>

<template>
    <test
        v-model:name="name"
        v-model:age="age"
    />
</template>

// 子组件
<script setup lang="ts">
    const props = defineProps(["name", "age"]);
    const emit = defineEmits(["update:age"]);
    const addAge = () => {
        emit("update:age", props.age + 1);
    };
</script>

<template>
    <h1>demo</h1>
    <h2>name:{{ name }}</h2>
    <h2>age:{{ age }}</h2>
    <button @click="addAge">+1</button>
</template>

这个例子中, 点击按钮可以实现父子组件的数据同步增加