vue3组合式api 父子组件数据同步v-model语法糖的用法

V-model 大多数情况是用在 表单数据上的, 但它不止这一个作用


父子组件的数据同步, 有一个 语法糖 v-model,这个方法简化了语法, 在elementplus中,都有很多地方使用, 所以我们要理解清楚


父组件

使用 v-model 向子组件, 传递了一个 money 的数据

js 复制代码
<template>
  <div class="parentwrapper">
    我是父组件, 我的money是 {{money}}
    <hr/>
    <child v-model="money"></child>
  </div>
</template>

<script setup>
import {ref} from "vue";
import child from "@/views/Home/child.vue";
let money = ref(10000);
</script>

子组件

js 复制代码
<template>
  <div class="child">
    我从父组件那里得到 {{props.modelValue}}
    <button @click="changeMoney">我来改变父组个的money</button>
  </div>
</template>

<script setup>
 let props = defineProps(["modelValue"]);
 let emit = defineEmits(["update:modelValue"]);

 const changeMoney = ()=>{
   emit("update:modelValue",props.modelValue+1000);
 }
</script>

从上面的代码中可以看到,
v-model 对父组件的代码量是有明显减少的, 对子组件中的代码量没有变化, 子组件 一方面是要在 prop 中接收 父组件隐式传来的属性名 modelValue , 另一方面要在子组件中的 自定义一个名为 update:modelValue 的一个事件, 当 子组件的 dom click 事件触发后, 调用 emit("update:modelValue")


这种方式对我们写的组件进行封装是很有做用的,子组件封装好方法, 父组件只需要使用 v-model 就可以,同步子组件中的数据了


v-model的进阶用法

上面的例子中,v-model只能在一个子组件中写一次, 那如果我有两个或多个数据要和子组件同步怎么办呢?

我们可以使用 v-model:XXX 来解决

我们在父组件中 利用 v-model 向子组件传递了两个数据 money 和 person

js 复制代码
<template>
  <div class="parentwrapper">
    我是父组件, 我的money是 {{money}}
    <hr/>
    <child v-model:money="money" v-model:person="person"></child>
  </div>
</template>

<script setup>
import {ref} from "vue";
import child from "@/views/Home/child.vue";
let money = ref(10000);
let person = ref("孙悟空")
</script>

在子组件中,我们接收到父组件的 v-model:XXX 传来数据

js 复制代码
<template>
  <div class="child">
    我从父组件那里得到 {{props.money}}-------{{person}}
    <button @click="changeMoney">我来改变父组个的money</button>
    <button @click="changePerson">我来改变父组件中的person</button>
  </div>
</template>

<script setup>
 let props = defineProps(["money","person"]);
 let emit = defineEmits(["update:moeny","update:person"]);
 const changeMoney = ()=>{
   emit("update:money",props.money+1000);
 }
 const changePerson = ()=>{
   emit("update:person","如来佛祖");
 }

</script>

从上面的代码, 我们看到, 我们在子组件中, 使用 prop 接收了, v-model:XXX 中的 XXX 属性

同时, 我们定义了两个对象的自定义事件 update:XXX 事件

当子组件的 dom click 事件触发时 就emit:XXX 事件


父组件中没有添加任何代码就,实现了父子组件的数据同步

这就是 V-model 的语法糖的效果

相关推荐
叫我阿柒啊9 小时前
Java全栈工程师的面试实战:从技术细节到业务场景
java·数据库·spring boot·微服务·vue·全栈开发·面试技巧
夏沫mds16 小时前
【基于hyperledger fabric的教育证书管理系统】
运维·go·vue·区块链·gin·fabric
科杰智能制造17 小时前
PDF,HTML,md格式文件在线查看工具
javascript·pdf·vue·html
XiaoMu_0012 天前
【Django + Pure Admin】基于Django+Vue3的前后端分离管理系统框架设计
django·vue
爱学大树锯2 天前
【Ruoyi 解密 - 08. 前端探秘1】------ 从“交互原理”到“开发逻辑”,后端也能看懂的前端实战指南
前端·elementui·vue
今天不要写bug2 天前
antv x6实现封装拖拽流程图配置(适用于工单流程、审批流程应用场景)
前端·typescript·vue·流程图
叫我阿柒啊3 天前
Java全栈开发面试实战:从基础到复杂场景的深度解析
java·数据库·spring boot·面试·vue·测试·全栈开发
菜鸟很沉3 天前
Vue3音频组件开发与使用指南
javascript·vue·音频组件
天籁晴空4 天前
vscode 配置 + androidStudio配置
vscode·uni-app·vue
lumi.4 天前
2.3零基础玩转uni-app轮播图:从入门到精通 (咸虾米总结)
java·开发语言·前端·vue.js·微信小程序·uni-app·vue