Thêm sự kiện nghe để <router-link> thành phần sử dụng "v-on:" Chỉ thị - VueJS

Question

Tôi đang cố gắng để thêm một handler tùy chỉnh InlineButtonClickHandler sự kiện click một thành phần <router-link>, vì vậy mà tôi có thể phát ra một tùy chỉnh appSidebarInlineButtonClick sự kiện.

Nhưng mã của tôi không hoạt động. Tôi đang làm gì sai?

<template> 
    <router-link :to="to" @click="InlineButtonClickHandler"> 
    {{ name }} 
    </router-link> 
</template> 

<script type="text/babel"> 
export default { 
    props: { 
    to: { type: Object, required: true }, 
    name: { type: String, required: true } 
    }, 
    methods: { 
    InlineButtonClickHandler(event) { 
     this.$emit('appSidebarInlineButtonClick'); 
    } 
    } 
} 
</script> 

Answer 1

Bạn cần phải thêm .native modifier:

<router-link 
    :to="to" 
    @click.native="InlineButtonClickHandler" 
> 
    {{name}} 
</router-link> 

này sẽ lắng nghe sự kiện nhấp chuột mẹ đẻ của phần tử gốc của router-link thành phần.

Answer 2

một giải pháp tốt đẹp sẽ là:

<a v-link='{name: "home"}' v-on:click.capture='InlineButtonClickHandler'>Home</a>

Answer 3

<router-link:to="to"> 
    <span @click="InlineButtonClickHandler">{{name}}</span> 
</router-link> 

Có thể bạn có thể thử điều này.