15、Vue 3 （2024 版）基础笔记 - 使用 defineModel 实现组件数据传递

使用 defineModel 宏实现组件数据传递，这是官方推荐的方式。

上篇文章中，我们使用 watch 来实现组件之间数据的传递，看起来似乎有点繁琐，使用官方推荐的 defineModel 将变得简单简洁。

1、子组件

src/components/comp/SearchComp.vue

<template>
    搜索：<input type="text" v-model="searchModel" >
</template>

<script setup lang="ts">
    const searchModel = defineModel()
</script>

2、父组件

src/App.vue

<template>
    <p>子组件中的搜索内容：{{ searchValue }}</p>
    <SearchComp v-model="searchValue"/>
</template>

<script setup lang="ts">

    import SearchComp from "./components/comp/SearchComp.vue";
    import { ref } from "vue";

    const searchValue = ref('search keywords')
</script>

这样就完成了组件数据的传递。