1 vue3 中的双向绑定
// Parent.vue
<Child v-model="visible">
<!-- 等价于-->
<Child :modelValue="visible" @update:modelValue="visible=$event">
因此，在Child组件中，需要定义一个名为modelValue的prop，如果需要修改modelValue，需要定义一个名为update:modelValue的emit，并且调用
2 defineModel的使用
2.1 单个双向绑定
// Child.vue
<template>
<button @click="modelValue=false">-</button>
</template>
<script setup>
import {
defineModel } from "vue";
const modelValue = defineModel();
</script>
2.2 多个双向绑定
// Parent.vue
<Child v-model="visible" v-model:header="headerVisible">
// Child.vue
<template>
<button @click="modelValue=false">-</button>
<button @click="headerVisible=false">-</button>
</template>
<script setup>
import {
defineModel } from "vue";
const modelValue = defineModel();
const headerVisible = defineModel('headerVisible');
</script>
3 defineModel的开启条件
vue3.3需要在vite.config.js添加配置，重启项目
export default defineConfig({
plugins: [
vue({
script: {
defineModel: true,
},
}),
],
});
vue3.4直接使用
