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

Question

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

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

然后我尝试在名为 TheForm.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>

然而，尽管 TheForm.vue 中的按钮样式正确，但 @click 和 v-if 等事件没有注册（即我可以单击按钮但它不会做任何事情 - 它甚至不会显示错误）。

我该如何解决这个问题，以便道具和事件起作用？

Answer 1

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

您需要单独传递它们，如下所示：

<v-btn dark color="blue" class="blue-btn" @click="$emit('click', $event)">

或者你可以像这样传递所有事件：

<v-btn dark color="blue" class="blue-btn" v-on="$listeners">

看：

https://v2.vuejs.org/v2/api/#vm-listeners

v-if指令应该可以正常工作。 你不需要做任何特别的事情来让它工作。

如果您需要传递道具，则与事件大致相同。 您需要单独或一起传递它们。 要将它们一起传递，它将是：

<v-btn dark color="blue" class="blue-btn" v-bind="$attrs">

请注意， $attrs将仅包含未定义为 props 的属性，因此对于您定义为 props 的任何属性，您都需要单独传递它们。

看：

https://v2.vuejs.org/v2/api/#vm-attrs