Vuejs 路由器监听事件 [英] Vuejs router listen to events

问题描述

我有一个组件，其中道具通过路由传递(https://router.vuejs.org/guide/essentials/passing-props.html).我的问题是如何监听组件发出的事件，以便我可以改变从路由传递的道具?

I have a component wherein the props were passed through the route (https://router.vuejs.org/guide/essentials/passing-props.html). My question is how do I listen to emitted events from the component so that I can mutate the props passed from the route?

在我的路线中，我有类似的东西

In my route I have something like

...
{
    path: "details/:id?",
    name: "booking.details",
    component: BookingDetails,
    props: true
}
...

在组件内部我有一个道具

And inside the component I have a props

...
props: {
    invoice: {
        type: Object,
        required: false,
        default: () => ({})
    }
},

...

methods: {
    save () {
        this.$emit('reset-invoice') // where do I capture this event
    }
}

...

推荐答案

如果我正确理解了你的问题，那么听力组件应该是 ，所以:

If I understood your question correctly, the listening component would be the <router-view>, so:

<router-view @reset-invoice="resetInvoice"></router-view>

无论在哪个组件中呈现此路由器视图:

And in whichever component this router view is rendered:

{
  methods: {
    resetInvoice() {
      // ...
    }
  }
}

这篇关于Vuejs 路由器监听事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！