当前位置：首页 > news >正文

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

news 2025/5/22 8:08:02

目录

一、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监听输入框输入事件，并把最新输入的值传递给父组件进行更新 -->子组件输入框：<inputtype="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)"-->子组件输入框：<inputtype="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>