Question

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

某些模板如下所示

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话题，还没有发现对我有帮助的东西。

Answer 1

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

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

如果这样做不利于添加更多代码以使示例更清楚，则更好。

Answer 2

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

collapsed道具接受布尔值。您的父组件将如下所示：

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

然后，每次您更改自己的mycollapse属性时，边栏菜单组件都会对该更改做出反应。

如何为道具设定参数值？

2 个答案: