Vue 全局注册子组件与局部注册子组件

Vue注册全局子组件和局部子组件

ps: 这里是使用vue-cli搭建的vue开发目录
1
Vue注册全局子组件
第1步: 创建子组件,代码如下
<template>
    <div id="header">
        <div class="head">全局子组件</div>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="scss">
    #header {
        .head{
            height: 40px;
            line-height: 40px;
            background-color: red;
            font-size: 16px;
            color: #fff;
            text-align: center;
        }
    } 
</style>

第二步: 在main.js中注册子组件,代码如下:
    // main.js中的代码
    ...
    
    import head from "./components/head";  // header
    Vue.component("headBar", head);
ps: 这里的组件所在的目录,  需要看自己所创建的子组件的目录
1
第三步, 使用子组件,代码如下:
<template>
    <div id="my">
        <!-- 头部 -->
        <headBar></headBar>
    </div>
</template>

<script>
    export default {
        data(){
            return {

            }
        }   
    }
</script>

<style lang="scss">

</style>

完成全局子组件的注册和使用
1
Vue注册局部组件
第一步, 创建子组件, 代码如下:
<template>
    <div id="bottom">
        <div class="nav">底部导航栏</div>
    </div>
</template>

<script>
    export default {
        data(){
            return {

            }
        }   
    }
</script>

<style lang="scss">
    .nav {
        width: 100%;
        height: 40px;
        line-height: 40px;
        background-color: red;
        color: #fff;
        text-align: center;
        position: absolute;
        bottom: 0;
        left: 0;
    }
</style>

第二步, 注册并使用子组件

ps:局部子组件注册完成并使用。