什么是组件？
它是vue.js最强大的功能之一，是可扩展的html元素，是封装可重用的代码，同时也是Vue实例，可以接受相同的选项对象(除了一些根级特有的选项) 并提供相同的生命周期钩子组件
例如 页面头部、侧边、内容区，尾部，上传图片，等多个页面要用到一样的就可以做成组件，提高了代码的复用率
组件注册
组件的注册分为全局注册和局部注册
局部注册
局部注册（在哪里挂载 在哪里注册 类似局部变量）
在当前组件内部使用components属性 直接声明挂载
示例：
<template>
<div id="App">
<!-- 挂载的组件 写的时候和标签一致 -->
<v-header></v-header>
<Body/> //名字如果和标签一致的话 简写
</div>
</template>
<script>
//要注册组件 先引入组件
//@ 路径代表 src开发目录 或者 可以相对 ./
// key：value
import Header from '@/components/Head.vue';
import Body from './components/Body';
export default {
name: 'App',
components:{
//使用components属性 直接声明挂载
'v-header':Header,
Body //名字如果和标签一致的话 可以进行简写
}
}
</script>
<style>
#App{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
</style>
头部组件：
<template>
<div id="Head">
我是头部组件
<br />
</div>
</template>
<script>
export default {
name: "Head",
};
</script>
<style>
#Head {
flex: 1;
border-bottom: 1px solid #000;
}
</style>
结果：我是头部组件
全局注册
在整个vue对象上进行注册；可以在main.js 中接入vue变量 进行全局注册
示例：
设message文件为全局注册
import component from './Component'
let Vue = createApp(component);//接入变量
//引入组件
import MessageBox from '@/components/common/Message';
//全局注册
Vue.component('v-messageBox', MessageBox);
message组件：
<template>
<div id="MessageInfo">消息提示组件！</div>
</template>
<script>
export default {
name: "MessageInfo",
};
</script>
<style>
</style>
头部组件引入其message
<template>
<div id="Head">
我是头部组件
<br />
//要与上面的标签一致化
<v-messageBox></v-messageBox>
</div>
</template>
<script>
export default {
name: "Head",
};
</script>
<style>
#Head {
flex: 1;
border-bottom: 1px solid #000;
}
</style>
结果为：
我是头部组件
消息提示组件
以上的这些组件注册方案 属于同步挂载 如若大量使用可能会造成加载慢