"v-on:" 지시문을 사용하여 구성 요소에 이벤트 수신기 추가 - VueJS.

"v-on:" 지시문을 사용하여 구성 요소에 이벤트 수신기 추가 - VueJS.

커스텀 핸들러를 추가하려고 합니다.InlineButtonClickHandler에 대해서<router-link>컴포넌트click내가 커스텀을 발산할 수 있도록appSidebarInlineButtonClick이벤트입니다.

그런데 코드가 안 돼요.내가 뭘 잘못하고 있지?

<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>

다음 수식자를 추가해야 합니다.

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

그러면 루트 요소의 네이티브 클릭 이벤트가 재생됩니다.router-link요소.

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

이거 한번 써보세요.

vue 3 및 vue 라우터 4에서는@event그리고.tag여기에 따라 소품을 제거하고 대신 사용할 수 있습니다.v-slot:

const Home = {
  template: '<div>Home</div>'
}
const About = {
  template: '<div>About</div>'
}
let routes = [{
  path: '/',
  component: Home
}, {
  path: '/about',
  component: About
}, ]

const router = VueRouter.createRouter({
  history: VueRouter.createWebHashHistory(),
  routes,
})


const app = Vue.createApp({
  methods: {
    test() {
      console.log("test")
    }
  }
})

app.use(router)

app.mount('#app')

<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-router@4"></script>

<div id="app">
  <h1>Hello App!</h1>
  <p>

    <router-link to="/" v-slot="{navigate}">
      <span @click="test" role="link">Go to Home</span>
    </router-link>
    <br/>
    <router-link to="/about">Go to About</router-link>
  </p>

  <router-view></router-view>
</div>

언급URL : https://stackoverflow.com/questions/42091805/add-event-listener-to-router-link-component-using-v-on-directive-vuejs