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: 这里的组件所在的目录,  需要看自己所创建的子组件的目录

第三步, 使用子组件,代码如下:

<template>
    <div id="my">
        <!-- 头部 -->
        <headBar></headBar>
    </div>
</template>

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

            }
        }   
    }
</script>

<style lang="scss">

</style>

完成全局子组件的注册和使用

2. 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:局部子组件注册完成并使用。
ps: 当然这只是简单的全局子组件的局部子组件的使用, 具体的使用情况看自己的项目需求。如有错误之处，还请指正。