vue封装menulist组件

项目中需要封装一个九宫格的组件，需要name,imgurl,url三个参数。
在用flex布局确定好总体布局后，封装一个menulist组件。
在页面用json将需数据处理一下
然后通过props给组件传参。

1.根据组件的三个参数创建一个json
图片等文件用require导入
@相当于是src目录下

const menuList = [
  {
    menuName: "公司通告",
    imgUrl: require("@/assets/img/message2.png"),
    url: "/notice",
  },
  {
    menuName: "进店拜访",
    imgUrl: require("@/assets/img/store2.png"),
    url: "/visitshop",
  },
  {
    menuName: "电话订单",
    imgUrl: require("@/assets/img/phone2.png"),
    url: "/phoneorder",
  },
  {
    menuName: "订单状态",
    imgUrl: require("@/assets/img/order2.png"),
    url: "/orders",
  },
  {
    menuName: "培训资料",
    imgUrl: require("@/assets/img/px2.png"),
    url: "/training",
  },
  {
    menuName: "消息中心",
    imgUrl: require("@/assets/img/mes2.png"),
    url: "/message",
  },
  {
    menuName: "新增门店",
    imgUrl: require("@/assets/img/add2.png"),
    url: "/addedshop",
  },
  {
    menuName: "同步数据",
    imgUrl: require("@/assets/img/data2.png"),
    url: "/asyncdata",
  },
];

2. 页面通过menuName,imgUrl,url三个参数传给组件
   必须确保传给组件的数据有内容，比如9宫格，但是只有8条数据
   就必须判断传数据长度范围内的。‘ <template v-if="i <= menuList.length">’

<div v-for="i in 9" :key="i" class="nav-cell">
        <template v-if="i <= menuList.length">
          <menu-cell
            :menu-name="menuList[i - 1].menuName"
            :img-url="menuList[i - 1].imgUrl"
            :url="menuList[i - 1].url"
          ></menu-cell>
        </template>
      </div>

3.组件通过props获取页面传过来的menuName,imgUrl,url三个参数

// props
props: ["menuName", "imgUrl", "url"],
// template
<template>
  <div class="menu-cell">
    <div class="img-wrap">
      <router-link :to="url"></router-link>
      <img :src="imgUrl" alt="menuName" />
    </div>
    <div class="title-wrap">{{ menuName }}</div>
  </div>
</template>