Vue.js 如何使用 vue-router 将 props/params 从父组件传递到子组件

Question

我正在开发一个在仪表板中显示练习表的简单应用程序。从那里，用户可以单击一个练习项目并打开一个练习组件。我已经让仪表板组件正常工作，但无法将数据传递给子练习组件。

这是我的仪表板代码：

<template>
     <div class="">
       <NavDash />
        <div class="container pb-5 pt-5">
            <div class="row">
                <div class="col d-flex align-items-center">
                <h3>Dashboard</h3>
                <p class="ml-auto">{{ $store.state.user.email }}</p>
            </div>
        </div>
  
      <hr>
      <AddExercise />
      <hr>
      <table class="table">
      <tbody>
        <ExerciseItem
      v-for="(exercise_item, index) in this.$store.state.exercises"
      :exercise="exercise_item"
      key="index"
    />
       </tbody>
     </table>
      </div>
    </div>
</template>

<script>
    import { firebaseApp, exercisesRef, usersRef } from '../firebaseApp'
    import AddExercise from './AddExercise.vue'
    import ExerciseItem from './ExerciseItem.vue'
    import NavDash from './NavDash.vue'

    export default {
      methods: {
        signOut() {
        this.$store.dispatch('signOut')
       firebaseApp.auth().signOut()
     }
    },
    props: ['exercise'],
    components: {
       AddExercise,
        ExerciseItem,
      NavDash
    },
    mounted() {
    exercisesRef.on('value', snap => {
        let exercises = []
        snap.forEach(exercise => {
            exercises.push(exercise.val())
        })
        console.log('exercises', exercises)
        this.$store.dispatch('setExercises', exercises)
      })
     }
    }
</script>

还有ExerciseItem.vue：

<template>
     <tr>
     
    <td class="text-left">
      <h4>{{exercise.title}}</h4>
      <p>{{exercise.description}}</p>
    </td>
    <td>
      {{exercise.categories}}
    </td>
    <td>
      <button @click="removeExercise(exercise)">X</button>
    </td>
    <td>
      <router-link to="/exercises/:id">LINK</router-link>
    </td>
    </tr>
</template>

<script>
     export default {
      props: ['exercise'],
    }
</script>

练习.vue：

<template>
  <div>
    <NavDash />
    Exercise {{ id }}
    <h4>{{title}}</h4>
       <p>{{description}}</p>
  </div> 
</template>

<script>
    import { firebaseApp, exercisesRef, usersRef } from '../firebaseApp'
    import NavDash from './NavDash.vue'

    export default {
     props: ['id'],
     components: {
      NavDash
     }
    }
</script>

还有路由器路径：

    { 
        path: '/exercises/:id', 
        name: 'Exercise',
        component: Exercise,
        props: {
            default: true
        }
    }

这是我的 Store 目录中的 Index.js：

    import Vue from 'vue'
    import Vuex from 'vuex'
    import { mutations } from './mutations'
    import * as actions from './actions'
    import * as getters from './getters'

    Vue.use(Vuex)

    const state = {
      user: {},
      exercises: {},
      articles: {}
    }

    export default new Vuex.Store({
      state,
      mutations,
      actions,
      getters
    })

我尝试按照此处的文档进行操作：https://router.vuejs.org/en/essentials/passing-props.html

但我似乎无法让路由器链接正常工作。

任何帮助将不胜感激！

谢谢！

Answer 1

根据您的路线，Exercise 组件接收 id 道具，而不是 exercise 道具。我不认为您可以通过路由传递 vue-router 中的对象，即使可以，我认为这将是一个不好的做法，因为它必须序列化路由中的对象。

Exercise 组件接收一个id 属性，并且应该使用它来查找练习。通过 ajax 请求、vuex 或其他一些状态源。由于您使用的是 vuex，因此您可以创建一个 getter，它返回一个对象，其中键是练习 id，值是练习。然后您可以使用 id 在练习组件中查找练习。

Vuex 吸气剂

exercisesById(state) {
    var obj = {};
    state.exercises.forEach(x => {
        obj[x.id] = x;
    });
    return obj;
}

练习部分

<script>
import { firebaseApp, exercisesRef, usersRef } from '../firebaseApp'
import NavDash from './NavDash.vue'

export default {
 props: ['id'],
 components: {
  NavDash
 },
 computed: {
     exercise() {
         return this.$store.getters.exercisesById(this.id);
     }
 },
}
</script>