在可重用的 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