Lately, I've been diving into Vue3 and exploring how to dynamically add components while allowing the parent component to listen for events from the child components. To illustrate my goal, I have crafted the code snippet below. Essentially, I am looking to append a new button when hovering over any existing button. However, as observed, only the first button triggers the hello function, indicating that the line 7 code "v-on:addButton: hello" in App.vue is not functioning as intended. I am seeking guidance on how to adjust the code to achieve my desired outcome or if there is a simpler approach to implement this feature.
Child component Hello.vue
<script setup lang="ts">
defineProps(['text'])
defineEmits(['addButton'])
</script>
<template>
<button @mouseenter="$emit('addButton')">{{text}}</button>
</template>
Parent component App.vue
<script setup>
import {createApp} from 'vue'
import Hello from './components/Hello.vue'
let cnt = 0
function hello() {
console.log('you enter a button')
const app = createApp(Hello, {"text": String(cnt++), onaddButton: hello})
const newNode = document.createElement('div')
document.getElementById("rootDiv").append(newNode)
app.mount(newNode)
}
</script>
<template>
<div id="rootDiv">
<Hello text="0" v-on:addButton="hello"/>
</div>
Update:
Thank you for the responses. I discovered that a simple modification from "v-on:addButton: hello" to "onaddButton: hello" resolves the issue.