目录

概述

正文

一、v-model 在原生 input 上的用法：

二、使用v-model在组件上实现双向绑定（通过计算属性实现）

概述

        在Vue3中，子组件可以通过$emit自定义事件来向父组件传递数据。在这种情况下，父组件可以通过监听子组件的自定义事件来获取数据并更新自己的状态。update:modelValue是Vue3中用于实现v-model的语法糖，它实际上是一个自定义事件，用于更新父组件中绑定的属性值。在子组件中，可以使用defineEmits来定义update:modelValue事件，然后通过$emit触发该事件来更新父组件中的属性值。

正文

一、v-model 在原生 input 上的用法：

<input v-model="searchText" />

等价于

<input
  :value="searchText"
  @input="searchText = $event.target.value"
/>

二、使用v-model在组件上实现双向绑定（通过计算属性实现）

当使用在一个组件上时，v-model 会被展开为如下的形式：

<CustomInput
  :modelValue="searchText"
  @update:modelValue="newValue => searchText = newValue"
/>

要让这个例子实际工作起来，<CustomInput> 组件内部需要做两件事：

1. 通过defineEmits 拿到传递过来的 modelValue。
2. 触发一个携带了新值的 update:modelValue 自定义事件

<!-- CustomInput.vue -->
<script setup lang="ts">
import { ref } from 'vue';

defineOptions({
    name: "CustomInput"
})

const props = defineProps(['modelValue']);
const emit = defineEmits(['update:modelValue']);

const defaultValue = ref<number>(0)

const changeFatherModelValue = () => {
    emit('update:modelValue', defaultValue.value ++);
}
</script>
<template>
    <div>
        <div>我是子组件</div>
        <div>我是父组件传过来的-----{{ modelValue }}</div>
        <button @click="changeFatherModelValue">更新父组件的value</button>
    </div>
</template>

现在 v-model 可以在这个组件上正常工作了：

<CustomInput v-model="searchText" />