第九章：组件 `v-model` —— 双向收银接口

1 分钟 109 字第 79 / 962 个阅读单元

在 Vue 里，表单是第一公民。组件也可以用 v-model。

截至 2026-03-28，官方文档对组件 v-model 的推荐实现方式是 defineModel()。

vue

<!-- SearchBox.vue -->
<script setup lang="ts">
const model = defineModel<string>({ default: '' });
</script>

<template>
  <input v-model="model" placeholder="搜索店铺" />
</template>

vue

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

const keyword = ref('');
</script>

<template>
  <SearchBox v-model="keyword" />
  <p>当前关键字：{{ keyword }}</p>
</template>

它不是魔法，而是官方统一封装好的双向协议。