How to resolve Vue warnings that occur when implementing a [button group] component and triggering dynamic emit events？

[Hobeein]

I need a [button group] component, use props.btns to control button number and event name, for example:

// in setup script

const props = defineProps({ btns: Array })
/**
 * btns: [
 *  { event: 'delete', name: 'delete' },
 *  { event: 'save', name: 'save' }
 * ]
*/


const emit = defineEmits(['btn-click'])

function btnClickEvent(btn) {
  // do something
  emit((btn.event || 'btn-click'))
}

<div
    class="here-is-a-button"
    v-for="(btn, i) in btns"
    :key="`btn-list-item-${i}`"
    @click="btnClickEvent(btn)"
>{{btn.name}}</div>

when click：[Vue warn]: Component emitted event "config" but it is neither declared in the emits option nor as an "onConfig" prop.

Here's why I didn't declare the event name in defineEmits:

1、declare the event name(after external props passed to the component) in defineEmits will alert an error because of Variable Hoisting

[@vue/compiler-sfc] defineEmits() in <script setup> cannot reference locally declared variables because it will be hoisted outside of the setup() function. If your component options require initialization in the module scope, use a separate normal <script> to export the options instead.

2、I need do something before emit event, so I don't want to emit custom events directly :

<div
    ...
    @click="$emit(btn.event)"
>{{btn.name}}</div>

Is there a better way to implement the component I need and No Warning?

thanks a lot.

[baiwusanyu-c]

emit must be declared first. In the code you gave, you only declared a btn-click emit, and delete and save did not declare the corresponding emit. As far as I know, Vue does not seem to support dynamic emit declarations, but you can directly pass the event function as props to the child component and call it in the child component

[Hobeein]

not elegant enough but it's a good suggest，Thanks dalao very much.❤🙏

make be I should try to create a issues to request dynamic emit declarations, that would be great.

[Shyam-Chen]

you can directly pass the event function as props to the child component and call it in the child component

This is how it's done in React v18 and Svelte v5.

In Vue:

<!-- Child.vue -->
<script setup>
import { useAttrs } from 'vue';

const attrs = useAttrs();
</script>