我如何使用vue-router在子Vue組件中使用計算屬性

Question

考慮以下計算屬性：

  computed: {
menuItems (){
  let menuItems = [
    {icon:'dashboard', title:'Home', link:'/'},
    {icon:'fa-code', title:'Code Portfolio', link:'/code'},
    {icon:'fa-rss', title:'Blog', link:'/'},
    {icon:'fa-info-circle', title:'About', link:'/'},
    {icon:'fa-envelope', title:'Contact', link:'/'},
  ]
  return menuItems
}}

使用vue-router，如何將該數組傳遞給子組件？

我試過在組件中聲明prop並將其綁定到router-link：

零件：

props: ['menuItems']

上級：

<router-view :menuItems="menuItems"></router-view>

這不起作用。 如何正確傳遞道具，或者有沒有更好的方法可以完全通過道具。 謝謝！

Answer 1

您不需要對靜態數據（或一旦創建了組件就永遠不會更改的數據）使用計算方法。您只需使用組件的data屬性即可。

然后：你想做什么？ 也許您需要菜單組件？ 您可以通過以下方式聲明您的應用（或主要組件）的模板：

<template>
  <div id="app">
    <custom-menu></custom-menu>
    <router-view></router-view>
  </div>
</template>

如果菜單鏈接根據路線更改，則可以在自定義菜單組件中處理菜單鏈接

Answer 2

我仍然不確定如何通過動態對象作為道具，但是我認為我對整個事情都考慮得太深了。

從vue.js文檔中：“經常忽略Vue應用程序中的真相來源是原始數據對象”

由於我只是試圖將授權狀態全局傳遞給我的組件，因此僅引用根數據實例是最簡單的。

因此，在需要該數據的任何組件中，我只需創建一個計算屬性：

computed: {
    user(){
      return this.$root.$data.user
    }
  } 

在根數據是動態的或它們的全局數據很多的情況下，vuex很好用。 我只是不想在這個小項目中使用它。