vue3中利用v-model实现父子组件之间的数据同步

作为现代前端开发中的重要框架之一，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中一个非常实用且易于上手的特性，值得我们在实际项目开发中多加利用。