Vue3学习（Vue3.3新特性——defineModel宏详解）

岁岁岁平安

2283人浏览 · 2025-05-21 11:50:24

岁岁岁平安 · 2025-05-21 11:50:24 发布

目录

一、Vue3.3新特性——defineModel宏。

（1）背景介绍与探讨。

（2）父子组件间双向绑定demo。(未使用defineModel宏)

1、父组件中引入子标签并使用v-model绑定一个响应式变量。

2、子组件使用defineProps接收属性modelValue，再使用defineEmits声明事件'update:modelValue'。监听输入框的值。

（3）父子组件间双向绑定demo。(使用defineModel宏)

1、子组件使用defineModel宏代替props接收属性，其次不需要定义事件emits。

2、父组件更替原来子标签并双向绑定v-model。

3、如果是Vue3.3版本，还需在vite.config.js文件中额外配置才能生效！(更高版本不需要)

一、Vue3.3新特性——defineModel宏。

（1）背景介绍与探讨。

官方文档。

defineModel宏是一个实验性质的语法（在Vue3.3版本时），它能够快速的完成数据的双向绑定！
实际作用：简化父子组件间双向绑定的“v-model”的使用。
在 Vue3 之前版本，使用 v-model 实现父子组件双向绑定。需在子组件定义 props 接收 modelValue，定义 emits 触发 update:modelValue 事件，代码较繁琐。
因为在vue3中，自定义组件上使用v-model，相当于传递一个modelValue属性，同时触发 update:modelValue 事件！如下图所示。

因为父组件在子组件使用v-model绑定。所以在子组件就需要使用props去接收（defineProps宏），然后再使用emits去定义父组件绑定事件 ‘update:modelValue’（defineEmits宏）。

所以当使用新特性 defineModel宏就能大大简化这其中的代码和逻辑！
不需要再去定义props接收与emits事件声明。若需要修改值时更不需要手动emit触发事件！下方通过demo间的对比，突出新特性 defineModel宏的使用效果。

（2）父子组件间双向绑定demo。(未使用defineModel宏)

1、父组件中引入子标签并使用v-model绑定一个响应式变量。

<script setup>
import MyInput from "./components/Myinput.vue";
import {ref} from "vue";
const txt = ref('123456') //设置默认输入框的值123456
</script>

<template>
  <div>
    <h1>我是顶层组件App.vue</h1>
    <div style="border: 1px solid #000;padding: 10px">
      <MyInput v-model="txt"></MyInput>父组件响应式数据：{{txt}}
    </div>
  </div>
</template>

<style scoped>

</style>

2、子组件使用defineProps接收属性modelValue，再使用defineEmits声明事件'update:modelValue'。监听输入框的值。

<script setup>
//接收属性modelValue
defineProps({
  modelValue: String,
})

//声明父组件绑定的事件'update:modelValue'
const emit = defineEmits(['update:modelValue'])

</script>

<template>
  <div>
<!-- @input监听输入框输入事件，并把最新输入的值传递给父组件进行更新 -->
    子组件输入框：<input
      type="text"
      v-bind:value="modelValue"
      @input="e => emit('update:modelValue', e.target.value)"
      >
  </div>
</template>

<style scoped>

</style>

页面初始渲染效果。

（3）父子组件间双向绑定demo。(使用defineModel宏)

1、子组件使用defineModel宏代替props接收属性，其次不需要定义事件emits。

<script setup>
import { defineModel } from 'vue'
//使用defineModel宏代替：接收属性modelValue与声明父组件绑定的事件'update:modelValue'
const modelValue = defineModel()

</script>

<template>
  <div>
    <!-- @input监听输入框输入事件，并把最新输入的值传递给父组件进行更新 -->
    <!--   不再使用emit更新输入框的值 @input="e => emit('update:modelValue', e.target.value)"-->
    子组件输入框：<input
      type="text"
      v-bind:value="modelValue"
      @input="e => modelValue = e.target.value"
  >
  </div>
</template>

<style scoped>

</style>

2、父组件更替原来子标签并双向绑定v-model。

<script setup>
import MyInput02 from "./components/Myinput02.vue";
import {ref} from "vue";
const txt = ref('123456') //设置默认输入框的值123456
</script>

<template>
  <div>
    <h1>我是顶层组件App.vue</h1>
    <div style="border: 1px solid #000;padding: 10px">
      <MyInput02 v-model="txt"></MyInput02>父组件响应式数据：{{txt}}
    </div>
  </div>
</template>

<style scoped>

</style>