vue3.4 defineModel 默认值相关

 

在传递的为基本数据类型的时候,在父组件没有传递值的时候会出现第一次加载无法同步. 当然子组件后续更新还会同步.

//父组件:
<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就可以了了.

更新时间:2024-12-28 10:36