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?
我有一个部件,其中道具通过路线(https://router.vuejs.org/guide/essentials/passing-props.html).我的问题是,我如何侦听组件发出的事件,以便我可以改变从路线传递的道具?
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
}
}
...
更多回答
Can you elaborate on "modifying the props" please? How are you planning to do that?
你能详细说明一下“修改道具”吗?你打算如何做到这一点?
优秀答案推荐
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() {
// ...
}
}
}
You should watch the route and set the props passed from the route, like below
你应该观察路线,并设置从路线通过的道具,如下所示
watch: {
'$route' (to, from) {
this.user_id = this.$route.params.id
},
}
It seems I'm too late but in case someone needed it.
看起来我来晚了,但万一有人需要它。
created() {
// watch the params of the route to fetch the data again
this.$watch(
() => this.$route.params,
() => {
//perform here your awesome logic
},
// fetch the data when the view is created and the data is
// already being observed
{ immediate: true }
)
},
更多回答
我是一名优秀的程序员,十分优秀!