介绍一、使用场景
二、使用步骤
<李> & lt; template>
& lt;才能div 类=皐ater-analysis"比;
,,,& lt; div 类=癱ontent-box", ref=癱ontentbox"比;
,,,,,& lt; a-tabs : default-active-key=癮ctiveComponent", @change=皌abChangeHandle"比;
,,,,,,,& lt; a-tab-pane
,,,,,,,,,)=癷tem 拷贝tabList"
,,,,,,,,,:关键=癷tem.key"
,,,,,,,,,:标签=癷tem.tab"
,,,,,,,在& lt;/a-tab-pane>
,,,,,& lt;/a-tabs>
,,,,,& lt; div 类=皌ab-pane-box"比;
,,,,,& lt; !——,通过是属性,绑定对应的组件名称,展示对应的组件,——比;
,,,,,,,& lt; component :是=癮ctiveComponent"祝辞& lt;/component>
,,,,,& lt;/div>
,,,& lt;/div>
& lt;才能/div>
& lt;/template> <李> <李> & lt; script>//,中横线转驼峰
var camelCase =, function (s), {
return 才能;s.replace (/- \ w/g, function (x), {
,,,return x.slice (1) .toUpperCase ();
,,});
}；//,批量引入子组件,,重点,语法见上
const allComponents =, require.context (“。/comp",,假的,,/\ .vue/美元);
console.log (allComponents.keys ())
(“。//,/tem-a.vue",,“。/tem-b.vue",,“。/tem-c.vue",,“。/tem-d.vue"】
console.log (allComponents.id)///src/视图/tempManage/comp sync \ .vue $//制作组件数组,在下方组件中注册使用
let resComponents =, {};
allComponents.keys () .forEach (comName =祝辞,{
let 才能;name =, camelCase (comName);
const 才能;comp =, allComponents (comName);
resComponents才能[name.replace (/^ \ \/(. *) \ \ w +美元/,,“1美元“)],=,comp.default;
})；
export default {
,,名字:“WaterQuery",
,,组件:resComponents,
数据才能(),{
,,,return {
,,,,,activeComponent:,“temA"
,,,,,tabList:,
,,,,,,,{
,,,,,,,,,关键:,“temA",
,,,,,,,,,标签页:,“一个组件,,
,,,,,,,},
,,,,,,,{
,,,,,,,,,关键:,“temB",
,,,,,,,,,标签:,“B组件,,
,,,,,,,},
,,,,,,,{
,,,,,,,,,关键:,“temC",
,,,,,,,,,标签:,“C组件,,
,,,,,,,},
,,,,,,,{
,,,,,,,,,关键:,“temD",
,,,,,,,,,标签:,“D组件,,
,,,,,,,},
,,,,,,
,,,};
,,},
()创建的才能,{
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
今天就跟大家聊聊有关怎么在vue中批量引入组件,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
一、使用场景
在日常开发中,经常会有这样一种情况:
import A 得到& # 39;组件/一个# 39; import B 得到& # 39;组件/b # 39; import C 得到& # 39;组件/c # 39; import D 得到& # 39;组件/d # 39;
遇到这种重复的代码,就在想,是否可以进行以下优化,一次性全部引入。于是就找到了webpack的api,通过调用要求。上下文来进行处理,具体代码如下:
二、使用步骤
涉及到:
组件名称为带中横线规范,最后要转为驼峰命名法的功能,
<李>组件的属性;
具体详解都在代码中:
<强> 1。文件目录
<强> 2。HTML代码
<强> 3. js代码
语法:<代码>要求。上下文(目录、useSubdirectories regExp)
目录:要查找的文件路径
<李>useSubdirectories:是否查找子目录
<李> regExp:要匹配文件的正则
返回值:两个方法一个属性
键():返回匹配成功模块的名字组成的数组
<李>解决():接受一个参数的请求,请求为测试文件夹下面匹配文件的相对路径,返回这个匹配文件相对于整个工程的相对路径
<李>id:执行环境的id,返回的是一个字符串,主要用在module.hot。接受,应该是热加载
