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>
效果 图如下：
浙公网安备 33010602011771号