随着vue3.4版本的发布,defineModel也正式转正了。它可以简化实现父子组件之间的双向绑定,也是目前官方推荐的双向绑定实现方式。
1.vue3.4的实现双向绑定
大家应该都知道v-model只是一个语法糖,实际就是给组件定义了modelValue属性和监听update:modelValue事件,所以我们以前要实现数据双向绑定需要给子组件定义一个modelValue属性,并且在子组件内要更新modelValue值时需要emit出去一个update:modelValue事件,将新的值作为第二个字段传出去。
<template>
<CommonInput v-model="inputValue" />
</template>
<script setup lang=