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

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

然后：你在尝试做什么？也许你需要一个菜单组件？您可以用这种方式声明您的应用程序（或主要组件）的模板：

<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效果很好。我只是不想在这个小项目中使用它。

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

2 个答案: