vue props傳數組爬坑

vue props傳數組爬坑

一：場景需求：

最近再做菜單導航欄時，發現父組件通過props向子組件傳數組時默認值一直不合適，最好發現， 此處必須是工廠方法；

二.錯誤：

Object/Array類型不能直接定義空對象或空數組，必須使用 工廠函數 return 回一個默認值。

三解決方案：

vue的作者的答復：

 

四.例子： 

父組件傳給子組件的數組： 
menuData: [
        {
          icon: "el-icon-menu",
          title: "工作台",
          path: "/desk",
        },
        {
          icon: "el-icon-menu",
          title: "我的事務",
          path: "/work",
        },
        {
          icon: "el-icon-menu",
          title: "系統監控",
          path: "/monitor",
        },
        {
          icon: "el-icon-location",
          title: "搜索導航",
          path: "/search",
          children: [
            {
              icon: "el-icon-location",
              title: "搜索導航1",
              path: "/search",
            },
            {
              icon: "el-icon-location",
              title: "搜索導航2",
              path: "/search",
            },
            {
              icon: "el-icon-location",
              title: "搜索導航3",
              path: "/search",
            },
          ],
        },
      ],

 

子組件接收menuData：
props: {
    menuData: {
      type: Array,
      default: () => [],  //重點
    },
  },