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

Question

所以我正在尝试使用 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>

在我的代码中，我尝试了很多不同的方法来给它提供 collapse 变量，但我觉得我没有完全掌握 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 属性时，侧边栏菜单组件都会对更改做出反应。

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

How to give a prop a parameter vue?

javascript

vue.js

vue-router

vue-component