VueJS 事件未被监听

如何解决VueJS 事件未被监听

我不明白为什么我的事件没有被正确监听...这里我的代码，正如你所看到的，我已经创建了一个基于@click 按钮事件的具有发射事件的组件。然后，我创建了我的“v-on:my-event”来捕获它..我不明白为什么我在控制台中看不到“yolo”。

//Call of the component BaseButton
<base-button variant="projeo-btn-deeppurple" event-type="yololol">
  <span class="mr-2">+</span> Ajouter un client
</base-button>

//Component BaseButton
<template>
    <button
        @click="sendEvent(eventType)"
        :class="`${variant} md:text-lg sm:mb-0 mb-3 text-base font-medium pl-5 pr-8 py-2 rounded-xl`"
        type="button"
    >
        <slot/>
    </button>
</template>

<script>
export default {
    props: {
        eventType: {
            type: String
        },variant: {
            type: String,validator: function (value) {
                return (
                    [
                        "projeo-btn-deeppurple",].indexOf(value) !== -1
                );
            }
        }
    },methods: {
        sendEvent (eventType) {
            this.$emit(eventType)
        }
    }
}
</script>

//Component that listen on the event add-customer
<AddCustomerModal
  v-on:add-customer="addCustomer"
  v-if="addModalisOpen"
  :isEdition="isEdition"
  :customerId="customer.id"
  :modalTitle="modalTitle"
  @close="addModalisOpen = false"
  ref="modalCustomer"
/>

//Script portion regarding the method addCustomer
<script>
 methods: {
   addCustomer () {
    console.log("yolo")
   }
}

感谢您未来的回答！

解决方法

这里有 3 层。发出事件的一个在底部。您需要监听基本按钮组件上的事件以使用 @someEvent="someHandler" 捕获该事件（在您的情况下，这里将是 @yololol 因为您根据事件类型道具发出事件）然后发出 $emit(' add-customer') 可以在 AddCustomModal 组件上监听此事件

//Call of the component BaseButton
<base-button variant="projeo-btn-deeppurple" event-type="yololol" @yololol="$emit('add-customer')"
// or you can do dynamic listener using variable which contains 'yololol' string
v-on:[yolololVariable]="$emit('add-customer')"
>
  <span class="mr-2">+</span> Ajouter un client
</base-button>

//Component BaseButton
<template>
    <button
        @click="sendEvent(eventType)"
        :class="`${variant} md:text-lg sm:mb-0 mb-3 text-base font-medium pl-5 pr-8 py-2 rounded-xl`"
        type="button"
    >
        <slot/>
    </button>
</template>

<script>
export default {
    props: {
        eventType: {
            type: String
        },variant: {
            type: String,validator: function (value) {
                return (
                    [
                        "projeo-btn-deeppurple",].indexOf(value) !== -1
                );
            }
        }
    },methods: {
        sendEvent (eventType) {
            this.$emit(eventType)
        }
    }
}
</script>

//Component that listen on the event add-customer
<AddCustomerModal
  v-on:add-customer="addCustomer"
  v-if="addModalIsOpen"
  :isEdition="isEdition"
  :customerId="customer.id"
  :modalTitle="modalTitle"
  @close="addModalIsOpen = false"
  ref="modalCustomer"
/>

//Script portion regarding the method addCustomer
<script>
 methods: {
   addCustomer () {
    console.log("yolo")
   }
}

,

试试这个。您只能在父组件中侦听发出的事件。

<base-button @emited="$emit($event)" variant="projeo-btn-deeppurple" event-type="yololol">
      <span class="mr-2">+</span> Ajouter un client
</base-button>

    //Component BaseButton
<template>
    <button
        @click="sendEvent(eventType)"
        :class="`${variant} md:text-lg sm:mb-0 mb-3 text-base font-medium pl-5 pr-8 py-2 rounded-xl`"
        type="button"
    >
        <slot/>
    </button>
</template>

<script>
export default {
    props: {
        eventType: {
            type: String
        },methods: {
        sendEvent (eventType) {
            this.$emit('emited',eventType)
        }
    }
}
</script>

但我认为你可以为你的任务使用作用域插槽