Question

我有

的组件

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

Answer 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', 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>

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

1 个答案: