Vue（十八）httpVueLoader：组件的全局注册和局部注册

本文链接：https://blog.csdn.net/wenxingchen/article/details/124862135

这篇博客介绍了在 Vue.js 中如何使用 httpVueLoader 进行组件的全局和局部注册。全局注册示例展示了如何引入并注册自定义组件 `my-header`，而局部注册则展示了在同一个组件内如何引用并注册 `Header` 组件。通过这两个例子，读者可以理解 Vue 单文件组件的导入和注册机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

注意：httpVueLoader加载的单文件导出方式不同：module.exports = {}，而不是export default {}

单文件中的全局注册

<template>
    <div class="home">
        <my-header></my-header>
    </div>
</template>

<script>
//引入，相当于import
const Header = httpVueLoader('./Header.vue');
//全局注册
Vue.component('my-header', Header);

    module.exports = {
        data() {
            return {
               
            };
        }
    };
</script>

<style scoped>
    .home {
        font-size: 24px;
        font-weight: bold;
    }
</style>

单文件中的局部注册

<template>
    <div class="home">
        <my-header></my-header>
    </div>
</template>

<script>
//引入 相当于import
const Header = httpVueLoader('./Header.vue');

    module.exports = {
        data() {
            return {
                msg: '主页内容'
            };
        },
       //局部注册
      components:{
        'my-header':Header
      }
    };
</script>

<style scoped>
    .home {
        font-size: 24px;
        font-weight: bold;
    }
</style>

Html中注册组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./static/js/vue.js"></script>
    <script src="./static/js/vue-router.js"></script>
    <script src="./static/js/httpVueLoader.js"></script>
</head>
<body>
<div id="app">
    <myheader></myheader>
</div>

</body>
<script>
<!--  命名全部小写、或者下划线隔开，【中划线或驼峰会报错】  -->
    const myheader = httpVueLoader('./static/components/Header.vue')
    new Vue({
        el: '#app',
        data: {
            msg: '哈哈'
        },
        components: {
            myheader
        }
    })
</script>
</html>