组件化开发和根组件
什么是组件化开发？
一个页面可以拆分为多个组件，每个组件有自己的样式，结构，行为，组件化开发的好处就是，便于维护，利于重复利用，提升开发的效率。
便于维护：页面中块出了问题，可以直接去找到这个组件，修改组件的样式逻辑结构。
利于重复使用：组件可以重复使用，哪里需要哪里直接搬过去就可以，自然也就提升了开发的效率。
就比如下图，组件化开发就类似于搭积木。
组件又可以分为根组件和小组件：
就比如第一张图，一整个就是一个根组件，而它也是由各个小组件构成。
根组件
其中根组件(单页面组件)由 结构(template) 行为(js) 样式(css) 三部分组成
<!-- 结构 template-->
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<!-- 行为 script-->
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<!-- 样式 style-->
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
普通组件
普通组件是需要注册才可以使用，注册又分为局部注册 和 全局注册
局部注册：只能在注册的组件内只用
1.创建.vue文件(三部分组成)在components目录下创建。
注意：组件名称规范必须是以大驼峰命名法.
简单写几行，主要是三部分组成：
<template>
<div class="MyBody">
我是MyBody
</div>
</template>
<script>
export default {
}
</script>
<style>
.MyBody{
width: 100%;
height: 400px;
background-color: skyblue;
}
</style>
2.在使用的组件内导入并注册
（1）.引入组件。
import Mybody from "./components/MyBodys.vue"
（2）.注册组件。
components: {
MyHeader:MyHeader,
MyFooter:MyFooter,
Mybody:Mybody,
}
也可以是这样写，但是必须是组件名称与属性名称一样
components: {
MyHeader,
MyFooter,
Mybody,
}
（3）通过注册属性名称直接使用。
<template>
<div id="app">
<MyHeader></MyHeader>
<Mybody></Mybody>
<MyFooter></MyFooter>
</div>
</template>
App.vue完整代码
<!-- 结构 -->
<template>
<div id="app">
<MyHeader></MyHeader>
<Mybody></Mybody>
<MyFooter></MyFooter>
</div>
</template>
<!-- 行为 -->
<script>
import MyFooter from "./components/MyFooters.vue"
import Mybody from "./components/MyBodys.vue"
import MyHeader from "./components/MyHeader.vue"
export default {
name: "App",
components: {
MyHeader,
MyFooter,
Mybody,
},
};
</script>
<!-- 样式 -->
<style>
#app {
width: 100%;
height: 600px;
background-color: skyblue;
}
</style>
效果图：
全局注册：可以在所有的组件内部使用。
1.创建.vue文件(三部分组成)在components目录下创建。
注意：组件名称规范必须是以大驼峰命名法.
2.在mian.js文件内导入并注册
（1）.引入组件。
import Mybody from "./components/MyBodys.vue"
（2）.注册组件。
Vue.component('MyButton',MyButton)
（3）.使用全局组件就可以在任意一个组件里面通过MyButton标签来使用这个按钮。
如下图我在每个页面都使用了MyButton标签
style上的scoped作用
默认情况:写在组件中的样式会 全局生效》因此很容易造成多个组件之间的样式冲突问题。
全局样式:默认组件中的样式会作用到全局。
局部样式:可以给组件加上 scoped 属性可以让样式只作用于当前组件.
scoped原理?
1.当前组件内标签都被添加 data-v-hash值 的属性
2.css选择器都被添加[data-V-hash值]的属性选择器最终效果: 必须是当前组件的元素,才会有这个自定义属性,才会被这个样式作用到
知识来源：黑马程序员vue2+vue3课程
