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

Question

我有一个组件

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

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

Answer 1

您也会想使用 $root to $emit an event on and listen $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>

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

Get reference to vue-router router-link component

vue.js

vue-router