Vue3中的defineModel

目录

一、vue3的defineModel介绍

二、defineModel使用

（1）在vite.config.js中开启

（2）子组件

（3）父组件

---

一、vue3的defineModel介绍

为什么要使用到defineModel呢？这里有这样一种场景：

子组件传递给父组件数据，并且实时更改。那么我们知道大概思路就是子组件使用defineEmits和defineProps来，但是这样很复杂，代码很多重复，实时更换让我们想到了v-model，所以我们就需要用到defineModel了。具体操作如下：

子组件的输入框数据变化，父组件也同样显示。

二、defineModel使用

（1）在vite.config.js中开启

 

（2）子组件

<template><div class="son"><h3>子组件</h3><input type="text" @input="e=>countvalue=e.target.value" :value="countvalue"> </div>  
</template><script setup>
import {defineModel} from 'vue'
const countvalue=defineModel()</script><style>
.son{border: 1px solid red;width: 200px;height: 200px;
}
</style>

（3）父组件

 

<template><div class="fa"><h3>父组件</h3><Son v-model="count"></Son>count={{ count }}</div>
</template><script setup>
import Son from './Son.vue';
import {ref} from 'vue'const count=ref(123445)
</script><style>
.fa{border: 1px solid black;width: 300px;height: 300px;
}
</style>