如何给道具一个参数vue？答案

【问题标题】：How to give a prop a parameter vue?如何给道具一个参数vue？
【发布时间】：2019-02-14 18:40:32
【问题描述】：

所以我正在尝试使用 vue-sidebar-menu 并弄清楚如何为它提供的道具传递参数。我尝试了多种不同的方法，但似乎找不到一种可以让我在加载页面时折叠导航栏的方法。有一个名为 collapsed 的属性，但是我似乎无法弄清楚如何在页面加载时将这个属性传递给它以保持导航栏折叠。

有些模板是这样的

export default {
  name: 'SidebarMenu',
  components: {
    Item,
    SubItem,
    MobileItem
  },
  props: {
    menu: {
      type: Array,
      required: true
    },
    collapsed: {
      type: Boolean,
      default: false
    },
    width: {
      type: String,
      default: '350px'
    },
    widthCollapsed: {
      type: String,
      default: '50px'
    }

我的导航栏实现代码如下所示

<template>
  <sidebar-menu :menu="menu" />
</template>

<script>
  export default {
    data () {
      return {
        collapsed: true,
        menu: [
          {
            header: true,
            title: 'Main Navigation'
            // component: componentName
            // visibleOnCollapse: true
          },
          {
            href: '/',
            title: 'Dashboard',
            icon: 'fa fa-user'
            /*
            disabled: true
            badge: {
            text: 'new',
            // class:''
          }
          */
          },
          {
            title: 'Other',
            icon: 'fa fa-chart-area',
            child: [
              {
                href: '/charts/sublink',
                title: 'Sub Link'
              }
            ]
          }
        ]
      }
    }
  }
</script>

使用我的代码，我尝试了很多不同的方法来给它折叠变量，但我觉得如果有人可以帮助我，我没有完全掌握 vue 道具我已经查看了关于这个的 vue 文档主题，并没有找到任何对我有帮助的东西。

【问题讨论】：

标签： javascript vue.js vue-component vue-router

【解决方案1】：

通常当你遇到这样的问题时，你可以快速查看package source code.

collapsed 属性接受一个布尔值。您的父组件将如下所示：

<template>
  <sidebar-menu :menu="menu" :collapsed="myCollapse"/>
</template>
<script>
  export default{
    data(){
      return {
        myCollapse:false
      }
    }
  }
</script>

然后，每次您更改自己的 mycollapse 属性时，sidebar-menu 组件都会对该更改做出反应。

【讨论】：

工作完美谢谢。我想我只是误解了组件接受道具的方式。

【解决方案2】：

在这种情况下，您需要将折叠的值作为道具传递给侧边栏菜单

<sidebar-menu :menu="menu" :collapsed="collapsed"/>

如果这无助于添加更多代码以使示例更清晰会更好。

【讨论】：