JimYaaa

<ChildComponent v-model:title="pageTitle" v-model:content="pageContent" />

// v-model 是下面寫法的語法糖:

<ChildComponent
  :title="pageTitle"
  @update:title="pageTitle = $event"
  :content="pageContent"
  @update:content="pageContent = $event"

JimYaaa

<ChildComponent v-model:title="pageTitle" />

// v-model:title 是下面寫法的語法糖:

<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />
  

JimYaaa

<ChildComponent v-model:title="pageTitle" />

// v-model:title 是下面寫法的語法糖:

<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />
  

JimYaaa

<ChildComponent v-model="pageTitle" />

// v-model 是下面寫法的語法糖:

<ChildComponent
  :modelValue="pageTitle"
  @update:modelValue="pageTitle = $event"
/>
  

JimYaaa

<ChildComponent :title.sync="pageTitle" />
  

JimYaaa

// ChildComponent.vue

<script>
  export default {
    props: {
      title: {
        type: String,
        default: 'Default title'
      }
    },

JimYaaa

<ChildComponent :title="pageTitle" @change="pageTitle = $event" />
  

JimYaaa

// ChildComponent.vue

export default {
  model: {
    prop: 'title',
    event: 'change'
  },
  props: {
    // title 取代 value
    title: {

JimYaaa

<ChildComponent v-model="pageTitle" />

// v-model 是下面寫法的語法糖:

<ChildComponent :value="pageTitle" @input="pageTitle = $event" />

JimYaaa

// Parent Component
<template>
  <div>
    <parent-recursive-component @recursiveEmit="recursiveEmit" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import ParentRecursiveComponent from './RecursiveComponent'