Vue.js如何使用Vue-Router將道具/參數從父組件傳遞到子組件

Question

我正在開發一個簡單的應用程序，該應用程序在儀表板上顯示一個練習表。 用戶可以從此處單擊ExerciseItem，然后打開Exercise組件。 我已經使Dashboard組件正常工作，但是無法將數據傳遞給子Exercise組件。

這是我的儀表板代碼：

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

Exercise.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

根據您的路線，“鍛煉”組件將接收一個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>