在传递的为基本数据类型的时候,在父组件没有传递值的时候会出现第一次加载无法同步. 当然子组件后续更新还会同步.
//父组件:
<script lang="ts" setup>
import { ref } from "vue";
import TestWidget from "@/views/test/components/test-widget.vue";
const id = ref<number>(null);
console.log(id.value);
</script>
<template>
<div>
<div class="bg-blue">父:{{ id }}</div>
<div class="mt-10">
<test-widget v-model="id"/>
</div>
</div>
</template>
// 子组件：
<script lang="ts" setup>
const val = defineModel<number>({default:10});
console.log(val.value);
function test() {
val.value++;
console.log(val.value);
}
</script>
<template>
<div>
val:{{ val }}
<el-button @click="test">test</el-button>
</div>
</template>
解决办法是可以给v-model值设置为null也就是 `const id = ref<number>(null);`出现此问题原因我的理解为undefined无法传递, 甚至传递null也是可以传递的值,undefined是值都不存在,不存在所以无法传递.导致第一次无法同步.
后续的更新会通过类似`emit('update:modelValue', value)`更新,从而父组件的 id 的赋值, 从而重新同步.
以上问题只是v-model是基本数据类型, 如果为引用类型的话... `ref()` 视图无法更新. `ref(null)`的情况下父组件的v-model值会同步子组建defineModel的值为`null`, 如果子组建中对数组,对象中的元素的操作会报错.
//父组件
<script lang="ts" setup>
import { ref } from "vue";
import TestWidget from "@/views/test/components/test-widget.vue";
const id = ref<number[]>();
console.log(id.value);
</script>
<template>
<div>
<div class="bg-blue">父:{{ id }}</div>
<div class="mt-10">
<test-widget v-model="id"/>
</div>
</div>
</template>
//子组件
<script lang="ts" setup>
const val = defineModel<number[]>({default:[10]});
console.log(val.value);
function test() {
val.value[0]++;
console.log(val.value);
}
</script>
<template>
<div>
val:{{ val }}
<el-button @click="test">test</el-button>
</div>
</template>
总结一下就是default还是很有作用的,尤其是在新建子组件调试过程中,只要保证传入的v-model不为undefined就可以了了.
