Vue3: 一文搞懂 v-model：父子组件传值超实用

最新推荐文章于 2025-06-28 18:24:43 发布

前端小云儿

最新推荐文章于 2025-06-28 18:24:43 发布

阅读量1.2k

点赞数 11

CC 4.0 BY-SA版权

分类专栏： vue3知识点文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/jieweiwujie/article/details/142494781

vue3知识点专栏收录该内容

88 篇文章 ¥39.90 ¥99.00

订阅专栏

超级会员免费看

1 基本原理


我们知道在 vue2 中，父子组件传值，想要父父组件或者子组件修改值，对应的父组件或者子组件也变化。可以做到，但是比较繁琐。而且 vue2 中多用于原生表单，比如 input.
<input
:modelValue="val"
@update:modelValue="newValue => val = newValue"
/>
其实原理就 2 步：

1. 子组件接收父组件 v-model 时传来的 modelValue 和 派发的 'update:modelValue'
2. 当子组件修改 modelValue 的值时，触发父组件派发的修改的事件。
   vue3 进行了进一步改进和封装 下就一起来看看：

2 v-model父子组件传值：只传递一个值

父组件

<script setup lang="ts">
import { ref } from "vue";
import HomeViewChild9child from "./HomeViewChild9child.vue";
defineOptions({
  name: "HomeViewChild9",
});
let val = ref("父组件初始值");

//2这里点击切换父组件的值val，跟着v-model="val"传递给子组件的值也会跟着变
const click = () => {
  val.value += val.value;
};
val;
</script>

<template>
  <h3>v-model父子

了解本专栏