nuxt3 自定义组件，局部注册&全局注册详解

准备

        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>

效果图