在写项目时遇到一个问题，先来看两段代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<template>
<div class="search-container flex items-center px-[15px]">
<el-icon class="search-icon cursor-pointer" size="18px" color="rgba(255, 255, 255, 0.5)">
<Search />
</el-icon>
<input
class="search-input bg-transparent w-[230px] h-[37px] pl-[10px] outline-none border-none font-size-[14px] text-white placeholder:text-white/50"
type="text" :placeholder="placeholderInfo.showKeyword" v-model.trim="keywords" @focus="focusHandler"
@blur="blurHandler" />
<el-icon class="clean-icon cursor-pointer" size="18px" color="rgba(255, 255, 255, 0.5)"
:class="{ visible: keywords }" @click="keywords = ''">
<CircleCloseFilled />
</el-icon>
<div class="suggest" v-show="showSuggest" v-loading="loading">
<list :list="state.list" :model="model" :keywordsList="state.keywordsList" />
</div>
</div>
</template>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
<template>
<div class="search-list h-full overflow-hidden py-[20px] px-[10px]">
<template v-if="model === 'hot'">
<div class="hot-list">
<div class="hot-title mb-[10px]">
热搜
</div>
<div class="hot-list-item flex items-center cursor-pointer h-[60px]" v-for="(item, index) in props.list"
:key="index">
<div class="item-index mr-[20px]" :class="{ 'top3': index < 3 }">
{{ index + 1 }}
</div>
<div class="item-content">
<div class="title flex items-center">
<span class="name font-[600] text-[14px] mr-[5px]">
{{ item.searchWord }}
</span>
<img v-if="item.iconUrl" :src="item.iconUrl" class="icon size-[13px]">
</div>
<div class="desc text-[11px] ">
{{ item.content }}
</div>
</div>
</div>
</div>
</template>
<template v-else>
<div class="keyWords-list">
<div class="keyWords-item flex items-center cursor-pointer h-[60px]" v-for="(item, index) in props.keywordsList"
:key="index">
<el-icon size="14px" class="mr-[5px]">
<Search />
</el-icon>
<span>
{{ item.keyword }}
</span>
</div>
</div>
</template>
</div>
</template>
|
下面的的list是index所使用的局部组件，可以看到 这里都用上了el-icon Search 这个图标 但是在子组件里面渲染的是index.vue的内容 ，导致这样的现象是因为我使用了vue自动注册组件插件将 src\component 里面的组件都自动注册了全局组件，由于 index.vue的文件名是search导致后注册的组件覆盖了element icon Search所以导致了这里面渲染了index.vue的内容，这就导致我的疑问，为什么子组件调用时覆盖了，但是我在index.vue使用确是element icon
首先我们来先了解一下vue组件的调用
首先vue会去找局部注册组件也就是import的
没找到就会去全局注册组件里面去找
这时vue的编辑器会有一个特殊机制去寻找一个不是组件本身但是同名的组件避免无限递归导致栈溢出， 由于我在main.ts里面注册了element的icon所以在list.vue里面没有达到我想要的效果，那解决这样的问题就很容易了将Search文件夹换名就行
x
