• Vue3中使用defineModel解决父子组件双向绑定的问题
  • 发布于 2个月前
  • 180 热度
    0 评论
背景
最近在做一些业务需求时,涉及到大量的父子组件数据传递,所以自然而然也会涉及到使用v-model去往子组件里传数据,达到双向绑定的效果,比如以下示例:

这是父组件里的代码

这是子组件里的代码,子组件里需要利用三个 API 才能达到双向绑定的效果
defineProps: 接收modelValue
defineEmits: 更新modelValue
computed: 获取、执行更新modelValue

封装 Hooks
但是真的是有点受够了,主要是这么写太多相似的代码了,所以我想着封装一个 Hooks 来完成这个操作,命名为useModel,使用方式如下

其实就是一个函数,接收 props、emit,然后把刚刚的逻辑放入到一个公共 Hooks 函数里去做罢了~这样确实是大大降低了代码的重复性

defineModel
但是偶然看到 Vue3.3 有一个新的 API,叫做defineModel的,它的出现就是为了解决上述说的问题,父子组件双向绑定时可以很方便的去做,那么要怎么去用这个 API 呢?

首先我们得在 vite.config 中去开启这个功能,因为这个功能是 Vue3.3 的实验性功能

接着去到子组件中使用defineModel即可完成双向绑定效果了!!!


用户评论