使用自定义v-model双向绑定对象

在VUE3中使用自定义V-model 传递整个对象

父组件

<template>
  <header>
    <div class="wrapper">
      {{ objData }}
      <HelloWorld v-model="objData"/>
      <input v-model="objData.prop1"/><br/>
    </div>
  </header>

  <main>
  </main>
</template>

<script setup>
// 子组件是HelloWorld
import HelloWorld from './components/HelloWorld.vue'
import {ref} from "vue";

// 定义一个objData ref对象
const objData = ref({prop1: 1, prop2: 2, prop3: 3})
// 使用定时器 更新父组件的对象，可以看到父组件的更新最同步双向绑定到子组件上
setTimeout(() => {
  objData.value.prop1 = 100
}, 2222)
</script>
<style scoped>
</style>

子组件

<template>
  <div class="greetings">
    <input v-model="localValue.prop2" /><br/>
    <input v-model="localValue.prop3" />
    <div>{{localValue.prop1}}</div>
  </div>
</template>
<script setup>
import { defineProps, defineEmits, ref, watchEffect } from "vue";

// 子组件定义一个 自定义v-model的绑定，modelValue 
const { modelValue } = defineProps({
  modelValue: {
    type: Object,
    default: () => {}
  }
});
// 子组件抛出v-model 的自定义事件 update:modelValue
const emits = defineEmits(["update:modelValue"]);
// 因为传入的props是只读，所以需要通过ref转化为响应式对象，并绑定到页面
const localValue = ref(modelValue);

const updateValue = (newValue) => {
  emits("update:modelValue", newValue);
};

watchEffect(() => {
  // 监听 localValue 的变化，一旦发生变化，更新父组件的 modelValue
  updateValue(localValue.value);
});

setTimeout(() => {
  // 修改 localValue 中的 prop1，并通过 watchEffect 更新父组件的 modelValue
  localValue.value.prop1 = 21;
  console.log(localValue.value);
}, 6000);
</script>