Получить ссылку на компонент vue-router router-link - PullRequest
Новая
       7

Получить ссылку на компонент vue-router router-link

0 голосов
/ 30 мая 2018

У меня есть компонент с 

<router-link to="page"></router-link>
<router-view></router-view>

В компоненте Page, на который ссылается ссылка, я запускаю событие.Компонент, содержащий ссылку, нуждается в подписке на это событие.Как получить ссылку на компонент Page и подписаться на его события?Поскольку я явно не объявил <page></page> в компоненте, содержащем <router-link> и router-view, я не могу использовать обычный синтаксис @event.

1 Ответ

0 голосов
/ 30 мая 2018

Вы захотите использовать от $root до $emit и прослушать событие $on.

Простое использование в любом месте вашего приложения; 

this.$root.$emit('myCustomEvent', 'hello world')

/* somewhere else in your app */
this.$root.$on('myCustomEvent', (msg) => {
  /* handle the custom event */
  console.log(msg)
})

Полный пример 

<!-- src/App.vue -->
<template lang="html">
  <div>
    <router-link to="page">Go to Page</router-link>
    <router-view></router-view>
  </div>
</template>
<script>
  export default {
    name: 'app',
    mounted () {
      this.$root.$on('pageEvent', handlePageEvent)
    },
    beforeDestroy () {
      // make sure you cleanup the event
      this.$root.$off('pageEvent', handlePageEvent)
    },
    methods: {
      handlePageEvent (ev) {
        console.log('you clicked me from within')
      }
    }
  }
</script>

<!-- src/Page.vue -->
<template>
  <div>
    <a @click="$root.$emit('pageEvent')">Click Me</a>
  </div>
</template>
...