通过插槽传递给组件，该组件发出事件

Question

大家好：我有一个模式，我希望按钮通过插槽传递，每个插槽都有自己的事件。问题是当我点击按钮时，事件会触发但父级听不到。

<template>
 <modal-detail v-if="viewModal" title="Modifica brands" @close="viewModal=false">
        <!-- <template #header><p>ciao bob</p></template> -->
        <template #body>
            sdfgsfgddd
        </template>
        <template #actions>
            <button-cancel buttonText="cancella" @click="$emit('close')"></button-cancel>
            <button-confirm buttonText="conferma" @click="$emit('confirm')"></button-confirm>
        </template>
    </modal-detail>
</template>

问题是 @close="something" 从未被调用过。

建议？

谢谢大家

Answer 1

您似乎正在使用自定义组件按钮。您要么需要将 @click 处理程序绑定到 prop 回调，要么使用 @click.native 来应用点击处理程序。

为了帮助调试事件和其他问题，例如将来使用 Vuex，您可以使用Vue browser dev tools。

如果您安装了该插件，并检查事件流，您可以看到什么事件正在发出。例如，如果您没有使用自定义按钮正确设置单击处理程序，那么您将看不到事件被发出。