Javascript 在可重用vue组件中注册的事件不工作

在我工作的网站上，我反复使用按钮和下拉菜单等组件。因为我经常使用它们，所以我决定为特定功能创建一个自定义组件，这样我就不必重新声明样式。其中一个组件是：BlueButton.vue

<template>
    <v-btn dark color="blue" class="blue-btn">
        <slot>
            <!--  -->
        </slot>
    </v-btn>
</template>

然后，我尝试在名为form.vue的表单组件中使用此组件：

<template>
    <blue-button @click="showTheDialog = false" v-if="thebutton(btn)">Cancel</blue-button>
</template>
<script>
import BlueButton from '../components/BlueButton'

export default {

    props: {
        //
    },

    components: {
        'blue-button' : BlueButton
    },
</script>

取消
从“../components/BlueButton”导入BlueButton
导出默认值{
道具：{
//
},
组成部分：{
“蓝色按钮”：蓝色按钮
},

然而，尽管form.vue中的按钮样式正确，但诸如@click和v-if之类的事件并没有注册（也就是说，我可以单击按钮，但它不会做任何事情-它甚至不会显示错误）

---

如何修复此问题以使道具和事件正常工作？

当包装组件时，事件不会自动传播

您需要将它们单独传递，类似这样：

或者，您可以通过以下方式传递所有事件：

见：

v-if

指令应该能正常工作。您不需要做任何特殊的事情来让它工作

如果你需要传递道具，这与传递事件的方式大致相同。你需要单独传递道具，或者一起传递道具。要将道具一起传递，需要：

请注意，

$attrs

将只包含未定义为道具的属性，因此对于任何定义为道具的属性，您需要分别传递它们

见：

---

当您包装组件时，事件不会自动向上传播

您需要将它们单独传递，类似这样：

或者，您可以通过以下方式传递所有事件：

见：

v-if

指令应该能正常工作。您不需要做任何特殊的事情来让它工作

如果你需要传递道具，这与传递事件的方式大致相同。你需要单独传递道具，或者一起传递道具。要将道具一起传递，需要：

请注意，

$attrs

将只包含未定义为道具的属性，因此对于任何定义为道具的属性，您需要分别传递它们

见：