vue3利用v-model实现父子组件之间数据同步的代码详解
作者：jieyucx
前言
作为现代前端开发中的重要框架之一，Vue.js一直致力于提供更加方便、高效的数据管理方式。在Vue 3中，v-model这一指令也得到了升级，使得父子组件之间的数据同步变得更加容易和灵活。本文将探讨一下Vue 3中如何利用v-model来实现父子组件之间的数据同步
一、v-model实现父子组件之间的数据同步
在Vue 3中，可以在<script setup>中使用defineEmits和defineProps来定义props和event。使用v-model时需要定义一个名为modelValue的prop和一个update:modelValue的event，代码示例如下：
- 子组件
<template>
<div>
<h3>子组件</h3>
<input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)">
</div>
</template>
<script setup>
import { defineProps, defineEmits } from 'vue'
const props = defineProps({
modelValue: {
type: String,
default: ''
}
})
const emits = defineEmits(['update:modelValue'])
</script>
在父组件中使用v-model时，可以通过v-model:propName绑定子组件的modelValue prop和update:modelValue event。代码示例如下：
- 父组件
<template>
<div>
<h3>父组件</h3>
<ChildComponent v-model:modelValue="message" />
<p>子组件输入的内容：{{ message }}</p>
</div>
</template>
<script setup>
import ChildComponent from './ChildComponent.vue'
let message = ''
</script>
原理是，在子组件中，v-model会将modelValue prop和update:modelValue event绑定在一起，当子组件的input事件触发时会emit一个update:modelValue event，从而更新父组件的message。而在父组件中，v-model会将message与modelValue prop和update:modelValue event绑定在一起，当父组件更新message时，会通过modelValue prop将message传递给子组件，在子组件中输入内容时，会通过update:modelValue event将新的内容传递给父组件更新message。这样就实现了父子组件之间的数据同步。
其中， v-model 相当于以下代码：
<template> <ChildComponent :modelValue="message" @update:modelValue="val => message= val"></Child> </template>
这样就可以在父组件和子组件之间实现双向数据绑定。当子组件的值发生变化时，会触发 update 事件传递给父组件，父组件接收到事件后会更新自己的值并重新渲染子组件。当父组件的值发生变化时，会通过 value prop 传递给子组件，子组件接收到 prop 后会更新自己的值并重新渲染。
二、v-model绑定多个值
1. 通过对象的方式
在Vue3的<script setup>中，可以使用v-model指令实现父子组件之间的双向数据绑定。如果需要同时绑定多个值，可以使用一个对象来存储这些值，然后在子组件中使用$emit方法将这个对象作为参数传递给父组件。
举个例子，假设有一个父组件Parent和一个子组件Child，需要同时绑定一个名字和年龄。可以在父组件中定义一个对象person，然后使用v-model指令来绑定它：
<template>
<Child v-model="person"/>
</template>
<script setup>
import Child from './Child.vue'
const person = {
name: 'John',
age: 20
}
</script>
在子组件中，可以通过props接收父组件传递过来的person对象，并在模板中使用v-model指令将每个属性与输入框绑定：
<template>
<div>
<label>Name:</label>
<input v-model="person.name">
<label>Age:</label>
<input v-model="person.age">
</div>
</template>
<script setup>
props: {
modelValue: Object
}
const person = ref(modelValue)
watchEffect(() => {
emit('update:modelValue', person.value)
})
</script>
注意，在子组件中需要使用props来接收modelValue，这是v-model指令默认传递的值。然后将这个对象转换为响应式对象，并使用watchEffect函数监听它的变化。调用emit('update:modelValue', person.value)时会将新的person对象作为参数传递给Parent组件。Parent组件会自动将其更新到person属性中。
通过这种方式，可以同时绑定多个值，并实现父子组件之间的双向数据绑定。
2. 使用多个v-model
在子组件中，可以使用$emit()方法将绑定的值发送到父组件中，从而实现父子组件之间的双向数据绑定。具体操作可以参考以下代码示例：
父组件中使用方式：
<template>
<h1>父组件中显示v-model{{pageNo}}{{pageSize}}</h1>
<Child v-model:pageNo="pageNo" v-model:pageSize="pageSize"></Child>
</template>
<script setup>
import {ref} from 'vue'
//父亲的数据
let pageNo = ref(1);
let pageSize = ref(3);
</script>
子组件中的代码示例：
<template>
<div>
<p>当前页数: {{ pageNo }}</p>
<p>每页数量: {{ pageSize }}</p>
<button @click="increasePageNo">增加页数</button>
<button @click="increasePageSize">增加每页数量</button>
</div>
</template>
<script setup>
let props = defineProps(["pageNo", "pageSize"]);
let $emit = defineEmits(["update:pageNo", "update:pageSize"]);
const increasePageNo = () => {
const increasedPageNo = parseInt(pageNo) + 1
$emit('update:pageNo', increasedPageNo)
}
const increasePageSize = () => {
const increasedPageSize = parseInt(pageSize) + 1
$emit('update:pageSize', increasedPageSize)
}
</script>
在子组件中，使用defineEmits()函数定义了两个事件，分别是update:pageNo和update:pageSize，用来在父组件中更新pageNo和pageSize的值。同时，也定义了两个方法increasePageNo和increasePageSize，用来修改当前页数和每页数量。
在方法中，使用$emit()方法触发对应的事件，传递修改后的值。父组件通过v-model绑定子组件中的属性，当子组件修改值时，会触发相应的事件，从而更新父组件中对应的值。
三、总结
在Vue3中，通过v-model我们可以方便地实现父子组件之间的数据双向绑定。在使用过程中，需要注意v-mode的本质是语法糖，实际上是通过props和emit来实现数据传递和事件的触发。此外，我们还可以通过.sync修饰符和自定义事件来实现类似于v-model的效果。总之，利用v-model实现父子组件之间的数据同步是Vue3中一个非常实用且易于上手的特性，值得我们在实际项目开发中多加利用。
以上就是vue3利用v-model实现父子组件之间数据同步的代码详解的详细内容，更多关于vue3 v-model父子组件数据同步的资料请关注脚本之家其它相关文章！