有什么好方法可以通过Vue路由器将道具传递到父组件?

时间:2018-08-11 06:37:26

标签: javascript vue.js 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路由器中搜索不错的东西。

有什么主意吗?

4 个答案:

答案 0 :(得分:0)

您快到了,只要将收到的道具的价值从孩子身上散发出给父母。

      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>

// code具有这些道具。     道具:['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 }
                  },
              ]
          },


        ]
      }
    ]
});

答案 1 :(得分:0)

以更优雅的方式实现它可能会有一些改进。

如Squiggs。提到过,我们可以在每个子组件中发出childinit,每次在子组件中编写“发光”东西都是很麻烦的。

但是,我们可以使用mixin解决此问题。我们编写了一个mixin,它发出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>

答案 2 :(得分:0)

使用路线元数据:

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 }
}

答案 3 :(得分:-1)

您也可以VuexlocalStorage管理道具。顺便说一下,Vuex中的值将在刷新后清除。