[英]Is there a nice way to pass props to the parent component with Vue router?
我有一个具有不同步骤的表单,它们都共享相同的标题结构。
不同步骤中标题的唯一区别是该标题中的措辞随着步骤而变化。
我正在寻找一种方法来做到这一点:
在我的 vue 路由器中:
path: '/form',
name: 'Form',
component: Form,
children: [
{
path: 'step1',
component: FormStep1,
propsForParent: {
title: "myTitle In Header In Form Component"
},
},
{
path: 'step2',
component: FormStep2,
propsForParent: {
title: "myTitle is different In Header In Form Component"
},
}
]
因此,当路由是 form/step1 时,我希望我的表单组件接收在我的子配置中设置的标题道具,如上所述等等。
我想避免在我的父组件中管理它,也避免我的孩子将此信息与事件传达给我的父组件或使用 vuex。 我正在 vue 路由器中直接搜索一些不错的东西。
任何的想法?
使用路由元数据:
path: '/form',
name: 'Form',
component: Form,
children: [
{
path: 'step1',
component: FormStep1,
meta: {
title: "myTitle In Header In Form Component"
},
},
{
path: 'step2',
component: FormStep2,
meta: {
title: "myTitle is different In Header In Form Component"
},
}
]
然后在您的父组件中:
computed: {
title () { this.$route.meta.title }
}
如果您希望标题作为道具传递给您的父组件,请使用:
routes: [{
path: '/form',
name: 'Form',
component: Form,
props (route) => {
return {
title: route.meta.title
}
}
children: [ ...
您还可以使标题可继承。 为此,您需要使用更复杂的检查:
const matched = route.matched.slice().reverse().find(route => route.meta.title)
matched.meta.title
注意: slice()
似乎什么都不做,但它正在创建匹配数组的副本,因此我们不会修改原始数组 - 删除slice()
会破坏您的调试工作。
您快到了,只需将收到的 prop 值从 child 发送到 parent。
path: '/form',
name: 'Form',
component: Form,
children: [
{
path: 'step1',
component: FormStep1,
props: {
title: "myTitle In Header In Form Component"
},
},
{
path: 'step2',
component: FormStep2,
props: {
title: "myTitle is different In Header In Form Component"
},
}
]
//Inside FormStep2 and FormStep1
created() {
this.$emit('childinit', this.title);
},
//inside Form
methods: {
onChildInit( value ){
this.title = value;
}
}
为了使事情更干净,请考虑在路由器内创建另一层子级,这样您就不必在每个子级上发射。 这是我现在正在查看的一个项目中的一些代码,它做了一些非常相似的事情,注意我正在传递的步骤道具。
//在我的timelineBase组件中,我监听onChildInit,设置一个方法来从孩子那里获取值,然后在布局中使用它来告诉pageStepper我在哪个部分。
<router-view v-on:childinit="onChildInit" :key="componentKey"></router-view>
<pageStepper :step="pageStepper"></pageStepper>
//代码有这些道具。 道具: ['mode','step','componentKey'],
这是我的路线。
const router = new VueRouter({
routes: [
{
path: '/',
component: Layout,
children: [
{
path: '',
component: homepage,
props: { cssClass: '' },
},
{
name: 'addTimeline',
path: 'timeline',
props: { mode:'add', step: 1, componentKey: 0 },
component: timelineBase,
children:
[
{
path: 'add',
component: timeline,
props: { mode:'add', step: 1, componentKey: 1},
},
{
name: 'updateTimeline',
path: ':id/update',
component: timeline,
props: { mode:'update', step: 1, componentKey: 2 }
},
{
name: 'addEvent',
path: ':id/event/add',
component: addevent,
props: { mode:'add', step: 2, componentKey: 3 }
},
{
name: 'editEvent',
path: ':id/event/edit/:event_id',
component: editevent,
props: { mode:'update', step: 2, componentKey: 4 }
},
{
name: 'previewTimeline',
path: ':id/preview',
component: preview,
props: { step: 3, componentKey: 5 }
},
]
},
]
}
]
});
以更优雅的方式实现它可能会有一些改进。
作为斯奎格斯。 提到,我们可以在每个子组件中发出childinit
,每次在子组件中编写发出的东西会很乏味。
但是我们可以使用 mixin 来解决这个问题。 我们编写了一个 mixin,用它的 props 发出childinit
,并在每个子组件中导入和使用这个 mixin。
// mixin
export default {
props: {
title: {
type: String,
default: '',
},
},
created() {
this.$emit('childinit', this.title)
},
}
// parent
<template>
<div class="wrapper">
<router-view @childinit="childInit"/>
</div>
</template>
<script>
export default {
data() {
return {
title: '',
}
},
methods: {
childInit(title) {
this.title = title
},
},
}
</script>
// child
<script>
import TitleMixin from './mixins'
export default {
mixins: [TitleMixin],
}
</script>
你也可以使用Vuex
或localStorage
来管理 props。 顺便说一下, Vuex
值会在刷新后被清除。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.