如何使用 vue-router 在子 Vue 组件中使用计算属性答案

【问题标题】：How do I use a computed property in a child Vue component using vue-router如何使用 vue-router 在子 Vue 组件中使用计算属性
【发布时间】：2018-03-24 21:28:47
【问题描述】：

考虑一个计算属性：

  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>

这行不通。我如何正确传递道具，或者有更好的方法来完全做到这一点。谢谢！

【问题讨论】：

可能是:menu-items="menuItems"，具体取决于您的模板是如何定义的。如果它在 DOM 中，则需要使用 kebab-cases。否则就是别的了。
澄清一下，我使用的是计算属性而不是数据属性，因为它稍后会与授权状态交互。
@Bert，好建议。我错过了。不过还是不行。
有趣。在 2.7 之前，这是可行的。从 2.8 开始，它不是。
他们昨天把它弄坏了，呵呵。我猜这假设您使用的是 2.8 或 3.0。如果是，请尝试恢复到 2.7。 github.com/vuejs/vue-router/issues/1800

标签： vue.js vuejs2 vue-router

【解决方案1】：

您不需要对静态数据（或一旦创建组件就永远不会更改的数据）使用计算方法。您可以简单地使用组件的 data 属性。

然后：你想做什么？也许您需要一个菜单组件？您可以通过这种方式声明您的 App（或主要组件）的模板：

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

在您的自定义菜单组件中，您可以处理您的菜单链接，如果它们根据路线发生变化

【讨论】：

谢谢@Radar155。一旦我稍后将其绑定到 Auth 状态，它最终将成为一个动态属性。而且我需要这些项目来渲染导航栏以外的东西。
您应该使用 vuex 将应用程序数据存储在所有组件共享的集中存储中。在这里您可以存储身份验证状态，所有组件都会根据您的逻辑对更改做出反应。
通常我会，但我只有这个需要共享的单个数据点，并且试图避免使用 vuex。

【解决方案2】：

我仍然不确定如何将动态对象作为道具传递，但我认为我想太多了。

来自 vue.js 文档：“Vue 应用程序中的事实来源是原始数据对象经常被忽视”

由于我只是试图将授权状态全局传递给我的组件，因此最简单的方法是仅引用根数据实例。

因此，在任何需要该数据的组件中，我只需创建一个计算属性：

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

在根数据是动态的或者它们有很多全局数据的情况下，vuex 效果很好。我只是不想将它用于这个小项目。

【讨论】：