JimYaaa

<template>
  <div>
    <recursive-component></recursive-component>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({

JimYaaa

function countDown(fromNumber) {
  console.log(fromNumber)
  let nextNumber = fromNumber - 1
  if (nextNumber > 0) {
    countDown(nextNumber) // 呼叫自己
  }
}

countDown(5)

JimYaaa

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

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

JimYaaa

<ChildComponent v-model="pageTitle" />

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

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

JimYaaa

// ChildComponent.vue

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

JimYaaa

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

JimYaaa

// ChildComponent.vue

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

JimYaaa

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

JimYaaa

<ChildComponent v-model="pageTitle" />

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

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

JimYaaa

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

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

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