一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第15天，点击查看活动详情。
我要一步一步往上爬~大家好，我是努力不浪费每分每秒热爱生活的小朋友，今天我们来一起学习一下组件的基本使用
1. 组件的定义
定义：组件就是实现应用中局部功能代码和资源的集合，代码指的是CSS、JS、HTML，资源指的是MP3、MP4、压缩包等等
2. 概念区分 : 模块和组件、模块化和组件化
模块
一般就是一个JS文件,向外提供特定功能的JS程序,因为JS文件很复杂,所以模块的作用就是简化JS编写,提高JS运行效率
组件
组件就是实现应用中局部功能代码和资源的集合,因为一个界面的功能很复杂,使用组件可以简化编码,提高运行效率
模块化
应用中的JS都用JS来编写,那么这个应用就可以称为模块化应用
组件化
应用按照功能点拆分,不同功能点就是不同的组件,应用就称为组件化
3. 使用组件的三大步骤
3.1 定义（创建）组件
使用Vue.extend(xx)创建，其中xx和new Vue(xx)时传入的那个xx是有区别的；
- 不用写
el: 组件就是一块砖，哪里需要哪里搬，因为所有组件都要被一个vm管理，由vm决定服务于哪个容器。 data必须写成函数:因为写成对象式是有引用关系的，如果两个地方同时使用了相同组件，那么一个地方改了data，另一个地方引用的data数据也会改变，而函数式每次调用data（）都会返回一个全新的对象。这就避免组件被复用时，数据存在引用关系。template可以配置组件结构
3.2 注册组件
- 局部注册：
new Vue时传入components选项，用的比较多 - 全局注册：
Vue.component('组件名',组件)
3.3 编写组件标签
写法：<组件名></组件名>
4. 举个栗子
<body>
<div id="root">
<hello></hello>
<hr>
<school></school>
</div>
<div id="root2">
<hello></hello>
</div>
</body>
<script type="text/javascript">
//第一步：创建school组件
const school = Vue.extend({
template:`
<div class="demo">
<h2>学校名称：{{schoolName}}</h2>
<h2>学校地址：{{address}}</h2>
</div>
`,
data(){
return {
schoolName:'大学',
address:'北京'
}
}
})
//第一步：创建hello组件
const hello = Vue.extend({
template:`
<div>
<h2>你好啊！{{name}}</h2>
</div>
`,
data(){
return {
name:'Tom'
}
}
})
Vue.component('hello',hello)
new Vue({
el:'#root',
//第二步：注册组件（局部注册）
components:{
school
}
})
new Vue({
el:'#root2',
})
</script>
结果：
解释：
- 通过
Vue.component('hello',hello)局部注册的组件，school组件是跟着id=root的vm大哥玩的，是不能在id=root2中直接调用的，（没有在id为root2的vm中注册的前提下） - 通过
Vue.component('hello',hello)全局注册的hello组件是可以在两个vm中使用的
