未侦听VueJS事件

Question

我不明白为什么我的活动没有被正确收听。在这里，正如您所看到的，我已经创建了一个带有基于@click按钮事件的emit事件的组件。然后，我创建了我的"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")
   }
}

感谢你未来的回答！

Answer 1

这里有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")
   }
}

Answer 2

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

<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
        },
        variant: {
            type: String,
            validator: function (value) {
                return (
                    [
                        "projeo-btn-deeppurple",
                    ].indexOf(value) !== -1
                );
            }
        }
    },
    methods: {
        sendEvent (eventType) {
            this.$emit('emited',eventType)
        }
    }
}
</script>

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