vue3 defineModel

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直接使用

官方文档defineModel