vue3利用v-model实现父子组件之间数据同步的代码详解

<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>

<template>
  <div>
    <h3>父组件</h3>
    <ChildComponent v-model:modelValue="message" />
    <p>子组件输入的内容：{{ message }}</p>
  </div>
</template>

<script setup>
import ChildComponent from './ChildComponent.vue'

let message = ''
</script>

<template>
  <ChildComponent :modelValue="message" @update:modelValue="val => message= val"></Child> 
</template>

<template>
  <Child v-model="person"/>
</template>

<script setup>
import Child from './Child.vue'

const person = {
  name: 'John',
  age: 20
}
</script>

<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>

<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>