准备
1、在目录下创建components文件夹,切记一定要是这个名字命名,因为只要在这个文件夹下的组件会被自动注册到全局,也就是说只要自定义组件写在这个文件夹下,就可以无需手动引入,就可以全局使用,但是要注意遵循引用的命名规则(详见下方,全局注册)
图1
开始
以上图1为例,在components下创建自定义组件,我这里是把自定义组件放在了base文件夹下,创建一个list组件,如下:
list.vue
<template>
<div>
<div>{{ color }} </div>
<div>{{ people.name}} </div>
</div>
</template>
<script setup>
const color = useColor()
const people = usePeople()
const add = (e) =>{
counter.value += e
}
</script>
<style lang="scss" scoped>
</style>
局部引入
<template>
<div>
<list></list>
<p @click="goTo">-----------------------------</p>
<list2></list2>
</div>
</template>
<script setup>
import list from '../components/base/list.vue'
import list2 from '../components/base/list2.vue'
const router = useRouter()
const goTo = () =>{
navigateTo('/list?id=111')
// router.push({path:'/list',query:{a:1111}})
}
</script>
<style lang="scss" scoped>
</style>
效果:
全局引入(自动引入)
nuxt3框架会把components文件夹下创建的组件自动注册到全局,所以直接在页面中使用即可,但要遵循其命名规则,例如图1中的image.vue组件,在页面中使用要以components下的文件路径首字母大写拼接命名,image.vue在components文件夹下的base文件夹下,那么组件命名就是BaseImage
具体全局引入可以.unxt文件夹下的components.d.ts文件
image.vue
<template>
<div>
<div class="animal">
<slot v-if="$slots.img" name="img" />
<img v-else :src="src" alt="图片" >
</div>
</div>
</template>
<script setup>
const props = defineProps({
src: {
type: String,
default: '1111'
},
})
</script>
<style lang="scss" scoped>
.animal {
width: 200px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
animation: turn 10s linear infinite;
img {
width: 100%;
}
}
.animal:hover {
animation-play-state:paused;
}
@keyframes turn {
0% {
transform: rotate(0deg);
}
20% {
transform: rotate(72deg);
}
40% {
transform: rotate(144deg);
}
60% {
transform: rotate(216deg);
}
80% {
transform: rotate(288deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
页面中使用
<template>
<div>
<BaseImage src="https://tse4-mm.cn.bing.net/th/id/OIP-C.nQIHKUGe4LzeqKOdljl-pQHaDs?rs=1&pid=ImgDetMain"></BaseImage>
</div>
</template>
<script setup>
</script>
<style lang="scss" scoped>
</style>
效果图