Understanding defineModel in Vue3

Vue series of articles

• Understanding v-memo in Vue3
• Understanding Suspense in Vue3
• Understanding reactive, isReactive and shallowReactive in Vue3
• Understanding defineModel in Vue3
• Understanding Fragment in Vue3
• Understanding Teleport in Vue3
• Understanding Async Components in Vue3
• Understanding v-model in Vue3
• Understanding watch and watchEffect in Vue3
• Understanding and Practice of the Vue3 Composition API
• Understanding Hooks in Vue3 (Why use hooks)
• Vue3- Use and Encapsulation Concept of Custom Hooks Functions
• Understanding the various ref in Vue3: toRef, toRefs, isRef, unref, etc
• Vue3 Development Solutions(Ⅰ)
• Vue3 Development Solutions(Ⅱ)
• The details about Vue3 that you didn’t know
• Vue3 develop document
• 28 Vue Interview Questions with Detailed Explanations

With the release of vue3.4 version, defineModel has also officially become a regular version. It can simplify the two-way binding between parent and child components and is the currently officially recommended two-way binding implementation.

How to implement two-way binding in the past

Everyone should know that v-model is just syntactic sugar. It actually defines the modelValue attribute and listens for the update:modelValue event for the component, so we had to implement two-way data binding before. You need to define a modelValue attribute for the subcomponent, and when you want to update the modelValue value in the subcomponent, you need to emit send out a update:modelValue event. Pass the new value as the second field.

Let’s look at a simple example. The code of the parent component is as follows:

<template>
  <CommonInput v-model="inputValue" />
</template>

<script setup lang="ts">
import { ref } from "vue";

const inputValue = ref();
</script>