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 的语法糖的效果

相关推荐
天下无贼!1 天前
【轮播图】H5端轮播图、横向滑动、划屏效果实现方案——Vue3+CSS position/CSS scroller
javascript·css·vue.js·vue
安琪吖1 天前
微前端:qiankun框架在开发中遇到的问题
前端·vue·element-ui
JIngJaneIL1 天前
家常菜点餐|基于java和小程序的家庭大厨家常菜点餐系统设计与实现(源码+数据库+文档)
java·数据库·小程序·vue·论文·毕设·家常菜点餐系统
飞翔的佩奇2 天前
基于SpringBoot+MyBatis+MySQL+VUE实现的房屋交易平台管理系统(附源码+数据库+毕业论文+部署教程+配套软件)
数据库·spring boot·mysql·vue·毕业设计·mybatis·房屋交易平台
YL雷子2 天前
纯前端使用ExcelJS插件导出Excel
前端·vue·excel
aiguangyuan2 天前
Vue 服务端渲染 Nuxt 使用详解
vue·前端开发·ssr
喜欢敲代码的程序员4 天前
SpringBoot+Mybatis+MySQL+Vue+ElementUI前后端分离版:日志管理(四)集成Spring Security
spring boot·mysql·spring·vue·mybatis
netho04 天前
nuxt3: trpc-nuxt和sqlite导致的503错误
数据库·sqlite·vue·nuxt
周航宇JoeZhou5 天前
JP3-3-MyClub后台后端(二)
java·mysql·vue·ssm·springboot·项目·myclub
风继续吹..5 天前
后台管理系统权限管理:前端实现详解
前端·vue