VUE3 父子组件数据双向同步方法 ——有点神奇的新方法

前言

今天在封装一个组件时，意外发现一个使父子组件数据双向同步的一种新方法，不使用emit的方法就可以使prop传入的对象form达到父子组件数据同步。话不多说，先看例子：

子组件代码

<!--Watch测试-->
<template><div>子组件<input type="text" v-model="localForm.name" /><h1>子组件：{
  { name }}</h1></div>
</template>
<script lang="ts" setup> import { computed, ref, watch } from 'vue'const props = defineProps<{form: any}>()const localForm = ref<any>({name: '小芳'})watch(() => props.form,(newVal, oldVal) => {console.log('子组件newVal', newVal)console.log('子组件oldVal', oldVal)console.log('子组件localForm', localForm.value === newVal)if (localForm.value !== newVal) localForm.value = newVal},{deep: true,immediate: true})let name = computed(() => {return localForm.value.name}) </script>
<s