获取对 vue-router router-link 组件的引用答案

【问题标题】：Get reference to vue-router router-link component获取对 vue-router router-link 组件的引用
【发布时间】：2018-11-08 15:57:00
【问题描述】：

我有一个组件

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

在链接链接到的页面组件中，我触发了一个事件。持有链接的组件需要订阅该事件。如何获取对 Page 组件的引用并订阅其事件？由于我没有在包含<router-link> 和router-view 的组件中明确声明<page></page>，所以我不能使用正常的@event 语法。

【问题讨论】：

标签： vue.js vue-router

【解决方案1】：

您将希望使用$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', this.handlePageEvent)
    },
    beforeDestroy () {
      // make sure you cleanup the event
      this.$root.$off('pageEvent', this.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>

【讨论】：

添加“这个”。在handlePageEvent this.$root.$on('pageEvent', this.handlePageEvent)之前