vue,使用v-for循环加载子组件

在项目开发中，通常我们需要在一个父页面中载入非常多的子页面，如果每个子页面都一一定义的话，会显得代码非常的冗余。这里我们可以通过v-for循环来实现一个加载子组件的方法。
1.在父组件中引入所有的子组件，并注册


2.在data中将子页面封装成一个数组

pages: [
        {
          name: "allOrder",
          label: "所有订单",
        },
        {
          name: "unpaid",
          label: "待支付",
        },
        {
          name: "stayAway",
          label: "待派单",
        },
        {
          name: "wangtingList",
          label: "待接单",
        },
        {
          name: "wangtingService",
          label: "待服务",
        },
        {
          name: "unCheck",
          label: "待确认",
        },
        {
          name: "finish",
          label: "已完成",
        },
      ],

3.在html部分写上v-for循环

<el-tab-pane
        v-for="(pages, index) in pages"
        v-bind:key="index"
        :label="pages.label"
        :name="pages.name"
      >
      <!--子组件-->
        <components :is="pages.name" v-if="pages.name == nowPage"></components>
 </el-tab-pane>

我这里使用的是element-ui中的组件，将el-tab-pane换成div，去掉 :label=“pages.label”
:name="pages.name"也是同样的效果

<div
        v-for="(pages, index) in pages"
        v-bind:key="index"
      >
<components :is="pages.name" v-if="pages.name == nowPage"></components>
 </div>