Vue Recursive Component Emit

vue.js

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

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

export default defineComponent({
  name: 'Parent',
  components: {
    ParentRecursiveComponent
  },
  setup () {
    const recursiveEmit = () => {
      console.log('recursiveEmit!!!')
    }
    
    return {
      recursiveEmit
    }
  }
})
</script>


// RecursiveComponent
<template>
  <div class="recursive-component">
    <button @click="$emit('recursiveEmit')">CLICK</button>
    <recursive-component @recursiveEmit="$emit('recursiveEmit')" />
  </div>
</template>

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

export default defineComponent({
  name: 'RecursiveComponent',
  emits: ['recursiveEmit'],
  setup () {
    return {}
  }
})
</script>