vue组件全局注册和局部注册

全局注册

如果想要一个组件在项目中哪里都可以直接调用，这个时候就需要用到全局注册，全局注册的缺点就是：注册了的全局组件，就算不需要用到，仍会占用内存

1.创建组件

创建一个文件zujian,在这个文件中创建zujian.vue，在zujian.vue中：

<template>
    <div>我是一个组件</div>
</template>

2.创建index.js文件

在跟zujian.vue同级目录下创建一个index.js文件

import ZUJIAN from './zujian.vue';

const zj = {
    install: function (Vue) {
        Vue.component('ZuJian', ZUJIAN)
    }
}

export default zj;

3.全局引入组件

在入口文件main.js中引入：

import ZuJian from '@/pages/zhuce-zujian/zujian'

Vue.use(ZuJian);

4.调用全局组件

前面已经注册好了全局组件，这个组件就可以在项目中任何地方调用了

<template>
    <div>
        <zu-jian />
    </div>
</template>

局部注册

1.创建组件

创建一个组件zujian.vue

<template>
    <div>我是一个组件11</div>
</template>

2.调用组件

<template>
    <div>
        <ZuJianJB />
    </div>
</template>

<script>
import ZuJianJB from "./zujian/zujian";
export default {
    components: {
        ZuJianJB
    }
};
</script>