ref :model :rule v-model :label-in-value prop vue.component require.context()

本文参考来源：https://www.imooc.com/wenda/detail/554770

目前model 主要用于表单验证，配合prop，rules 来使用。

大概逻辑，：model 定位到数据，如下，：model = “form” 定位到data中的form,prop 定位到具体的字段，表单与具体的字段关联，：：：具体示例说明：“可以得到数据form.prop.与input关联”。

双向绑定，耦合度不高

：rule 的简单使用说明：表单规则验证

v-model  详细使用见连接：https://blog.csdn.net/weixin_47450807/article/details/109295

:label-in-value 详细使用见连接 https://blog.csdn.net/aini_sks/article/details/84565330

简单的说明：vue 编写一个下拉框，并将下拉框中key，value的值都获取到。

select 默认返回的时value。加上这个对象，就时将获取可以的之和value的两个值。

通过总结，当加上：model 有：的地方都是双向绑定。

require.context 主要的作用时实现前端工程化动态的引入文件

require.context(directory, useSubdirectories = false, regExp = /^.//)
第一个参数目标文件夹
是否查找子集 true | false
正则匹配
比如：
require.context('./router',true,/.routes.js/
可以理解为获取router文件下以.routes.js结尾的文件，知道这个以后，就可以在项目动态引入文件，方便使用了

比如：我们 把组件全部写在components 文件夹下，然后创建componentRegister.js shiyong .

function changStr(str){
    return str.charAt(0).toUpperCase()+str.slice(1)  
}
export default {
    install(Vue) {
        const requireAll=require.context("./components",false,/.vue$/)
        requireAll.keys().forEach((item)=>{
            Vue.component(changStr(item.replace(/.//,'').replace(/.vue$/,'')),requireAll(item).default)
        })
    }
}

然后只要在main.js里引入这个js文件，然后vue.use()注册就可以在所有页面调用组件了
比如在components下创建了HelloWorld.vue组件，在页面中只需要<HelloWorld/>这样就可以使用了

vue全局注册组件

在项目中，我们都会针对项目功能，将项目中高频出现的部分写称组件，方便调用，这个时候可以使用require.context完成组件的注册，省区每个页面导入。

Vue.component("counter",{ //1.组件名为"conter"; 2.data 写函数; 3.template 写组件的内容（元素和触发的事件）
data:function(){
return {count:0}
},

//template 是模板的意思，在 html 里面是一个可以同时控制多个子元素的父元素。在这里定义了组件的内容
template:'<button v-on:click="count++">点击计算点击次数：{{count}}次</button>'
})

原文链接：https://blog.csdn.net/qq_41288833/article/details/105779057

网上找的综合使用案例，Vue路由模块化

在vue项目中，了路由文件会随着项目增大而越来越大，这个我们可以使用require.context进行模块化管理，首页定义好主路由router.s

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);
const routerList = [];
function importAll(r) {
    r.keys().forEach((key) => {
        routerList.push(r(key).default);
    });
}
importAll(require.context("../routes", true, /.routes.js/));//这里的目录和规则可以看自己习惯，这里获取的是routes下以.routes.js结尾的文件
const routes = [
    ...routerList,
];

const router = new VueRouter({
    routes,
});

export default router;

e代码如下：

<template>
  <div
    class="full-height flex-column half"
  >
    <Form
      ref="form"
      :model="form"
      :rules="rules"
    >
      <FormItem
        prop="domainId"
        label="域"
      >
        <UsDomain v-model="form.domainId" />
      </FormItem>
      <FormItem
        prop="groupType"
        label="资源类型"
      >
        <Select
          v-model="form.groupType"
          :label-in-value="true"
          @on-change="chgGroupType"
        >
          <template v-for="item in neGroups">
            <Option
              v-if="item.groupType!=='virtualization' || item.groupType!=='cloud'"
              :key="item.groupType"
              :value="item.groupType"
            >
              {{ item.name }}
            </Option>
          </template>
        </Select>
      </FormItem>
      <FormItem
        prop="neClass"
        :label="groupTypeText+'类型'"
      >
        <Select
          v-model="form.neClass"
          @on-change="chgNeClass"
        >
          <Option
            v-for="item in neClasses"
            :key="item.value"
            :value="item.value"
          >
            {{ item.name }}
          </Option>
        </Select>
      </FormItem>
      <FormItem
        prop="protocol"
        label="协议"
      >
        <Select
          v-model="form.protocol"
        >
          <Option
            v-for="(val,key) in protocols"
            :key="key"
            :value="key"
          >
            {{ key.toUpperCase() }}
          </Option>
        </Select>
      </FormItem>
      <FormItem
        prop="vendorId"
        label="厂商"
      >
        <Select
          v-model="form.vendorId"
          @on-change="getVersion"
        >
          <Option
            v-for="val in vendors"
            :key="val"
            :value="val"
          >
            {{ val }}
          </Option>
        </Select>
      </FormItem>
      <FormItem
        prop="version"
        label="版本"
      >
        <Select
          v-model="form.version"
        >
          <Option
            v-for="val in versions"
            :key="val"
            :value="val"
          >
            {{ val }}
          </Option>
        </Select>
      </FormItem>
      <FormItem
        prop="ip"
        label="IP地址"
      >
        <Input
          v-model="form.ip"
          placeholder="例如：192.168.1.1"
          @on-change="ipChange"
        />
        <Button
          v-if="isSoft"
          @click="hostChoose"
        >
          选择宿主机
        </Button>
      </FormItem>
      <FormItem
        v-if="isSoft"
        prop="hostType"
        label="宿主机类型"
      >
        <Select v-model="form.hostType">
          <template v-for="item in hostTypes">
            <Option
              v-if="form.protocol!='ssh' || item.name != 'Windows'"
              :key="item.value"
              :value="item.value"
            >
              {{ item.name }}
            </Option>
          </template>
        </Select>
      </FormItem>
      <FormItem
        prop="name"
        label="资源名称"
      >
        <Input
          v-model="form.name"
          placeholder="最大长度50个字符，若不填系统默认生成"
        />
      </FormItem>
      <FormItem
        prop="collectorId"
        label="采集器"
      >
        <Select v-model="form.collectorId">
          <Option
            v-for="item in collectors"
            :key="item.id"
            :value="item.id"
          >
            {{ item.name }}
          </Option>
        </Select>
      </FormItem>

      <component
        :is="comps[form.protocol.toLocaleUpperCase().replace('_','')]"
        ref="com"
        :protocol="form.protocol.toLocaleUpperCase()"
        :group-type="form.groupType"
        :ne-class="form.neClass"
      />
      <FormItem
        label=""
      >
        <Button @click="connectTest">
          连接测试
        </Button>
        <Button @click="discovery">
          确认发现
        </Button>
        <Button @click="discovery(true)">
          发现并继续
        </Button>
      </FormItem>
    </Form>
    <div v-if="neOpen">
      <UsNeModal
        v-model="neOpen"
        select-type="radio"
        :pram="nePram"
        @on-ok="neHostOk"
      />
    </div>
  </div>
</template>

<script>
import discoveryMixs from '@viewsMon/monitoring/discovery/discoveryMixs'
export default {
  name: 'DiscoveryOne',
  components: {
    UsDomain: () => import('@comBs/form/domainSelect'),
    UsNeModal: () => import('@comBs/neModal/main.vue')
  },
  mixins: [discoveryMixs],
  data () {
    return {
      comps: {},
      form: {
        domainId: '',
        groupType: '',
        neClass: '',
        protocol: '',
        vendorId: '',
        version: '',
        ip: '',
        name: '',
        collectorId: '',
        hostType: ''
      },
      groupTypeText: '',
      isSoft: false,
      neGroups: [],
      // neClasses: [],
      // protocols: [],
      // vendors: [],
      // versions: [],
      // collectors: [],
      hostTypes: [],
      // rules: { },

      neOpen: false, // 选择资源
      nePram: {
        groupType: 'host',
        hasPermission: true,
        sourceType: 1
      }
    }
  },
  created () {
    const context = require.context('./comps', false, /.vue$/, 'lazy')
    context.keys().forEach(key => {
      let name = key.replace(/(./)|(.vue)/g, '')
      this.comps[name.toLocaleUpperCase()] = () => import('./comps/' + name + '.vue')
    })
    this.init()
  },
  methods: {
    init () {
      this.addValidate()
      this.getNeGroups()
    },
    addValidate () {
      this.rules = {
        ...this.rules,
        groupType: [this.$rules.required],
        hostType: [this.$rules.required]
      }
    },
    getNeGroups () { // 获取资源类型
      this.$api.moNeGroups().then(res => {
        this.neGroups = res.obj || []
        if (res.obj.length) {
          this.form.groupType = res.obj[0].groupType
          this.groupTypeText = res.obj[0].name
          this.chgGroupType()
        }
      })
    },
    chgGroupType (e) {
      if (e) {
        this.form.groupType = e.value
        this.groupTypeText = e.label
      }
      this.getNeClass()
    },
    getNeClass () { // 改变厂商、协议、连接类型
      this.$api.moNeClassByGroup(this.form.groupType).then(res => {
        this.neClasses = res.obj || []
        this.form.neClass = res.obj[0].value
        this.chgNeClass()
      })
    },
    chgNeClass () { // neClass有字段判断是否为硬件，是软件，宿主机类型显示
      this.getProtocol()
      this.getVendor()
      this.neClasses.forEach((d) => {
        if (d.value === this.form.neClass) {
          this.isSoft = !d.isHardware
          return false
        }
      })
      this.isSoft && this.getHostType()
    },
 nameKey: 'ip' }, '资源')

    getHostType () {
      this.$api.moNeHostType().then(res => {
        if (!res.obj.length) {
          res.obj = [{ 0: '没有支持的类型' }]
        }
        this.hostTypes = res.obj || []
        this.form.hostType = res.obj[0].value
      })
    },
    hostChoose () {
      this.neOpen = true
    },
    neHostOk (id, row) {
      this.form.hostType = row.neClass
      this.form.ip = row.ip
    },
  

isContinue === true ? this.continueFn : this.toListPage)
   
    toListPage () {
      this.continueFn()
      document.querySelector("[menu-id='MON02']").click()
    }
   
  }
}
</script>

　　效果 图如下：