总结
我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
1.1 单个理解
最简单的理解，组件也相当于一个小型的Vue实例，组件也可以有实例的各种属性。
组件是一个完整的单位个体，可以有js可以有css和html。（现在写的是没有包含css和js）。
1.2 整体理解
开发过html的人都知道，其实我们界面是由一个个div的布局来显示出来，每一个div里都有对应的展示内容，如果我们把这一个个div想象成一个整体，整体中又可以嵌套一个整体，最后我们界面就会变成一个个小模块组成。
Vue组件开发就是这个模式，先定义一个个组件(相当于一个div)，组件可以嵌套，然后组成一个整体。
如下图： 通常一个应用会以一棵嵌套的组件树的形式来组织：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vJk7T308-1612834014926)(vue笔记2_files/1.jpg)]
1.3 组件的好处
可复用
低耦合
2.1 创建组件的第一种方式：
使用Vue.component创建一个组件
-
第一个参数是组件的名称（就是我们后续使用的元素标识）
-
第二个参数是对象，里面有很多参数，现在只说一个template（模板），就是我们存放展示内容的地方
Vue.component(‘component1’,{
template::`
hello
我的第一个组件
`
});
2.2 创建组件的第二种方式：
在Vue实例里注册,先定义好对象，然后在实例的components属性上把组件注册
//创建组件2 先定义好对象，然后在实例的components属性上把组件注册
const componentA ={
template:`
我的第二个组件 Hi
`
}
const app = new Vue({
el:“#app”,
data: {
number: 0
},
components:{
‘compontent2’:componentA
}
})
2.3 使用组件
1）怎么使用Vue的创建组件？
在创建组件的时候，我们都是有定义一个标志，如果是使用Vue.component创建就是第一个参数，如果是在components注册就是对象的名称
2）使用（直接用标识名称来使用组件）
组件的使用必须在Vue实例的div里，超出的实例，vue无法管理就无法使用这个组件了
3.1 为什么要用使用分离写法？
我们知道组件的展示内容是在属性template定义好的，然后会发现div的内容都直接在对象里面写，如果简单的内容还是可以的，但是实际的开发，肯定是比较复杂是功能，如果直接写在对象里就有点不好维护，也不好理解代码。如果把这个template对应的div放出来，那我们组件对象就好维护很好
3.2 怎么分离元素
有一个元素标签template就可以办到分离写法，在定义好，定义好id，然后在对象里用’#id’就可以了
hhhhhhhhhhh
Vue.component(“component3”,{
template: ‘#component3’
});
4.1 什么是全局组件？
全局组件：只要是用Vue.component 来创建的组件都是全局注册的 。也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中，局部组件和子组件都能使用。
比如你实例了两个new Vue()，这个全局组件就可以在这两个实例上都可以使用。（但是我们一般不会创建两个实例）
下面代码说明，我创建了全局组件，在两个实例app和app1都可以使用
我的第一个组件
4.2 什么是局部组件？
局部组件： 在实例的属性components或者是组件里的属性components上注册组件，叫局部组件，局部注册的组件在其子组件中不可用，如果要使用需要多重嵌套。
用下面的代码说明：在实例中只用component2组件，不能使用component1，因为component1没有在实例上注册
我的第一个组件
我的第二个组件
demo：
我的第一个组件
你们好
我的第二个组件
5.1 什么是父子组件？
其实就是组件里通过components再嵌套注册组件，嵌套注册组件的就是子组件，被嵌套就是父组件。
如图，红色区域就是父组件，嵌套在里面的蓝色区域就是子组件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QZCwS4kA-1612834014930)(vue笔记2_files/2.jpg)]
注意：全局组件不存在父组件和子组件的，因为全局组件在实例里的任何地方都可以使用
5.2 父子组件体现在代码上的结构
看下面例子的代码
Vue实例就是一个最大的父组件，component1注册在实例上，那component1就是Vue实例的子组件。
component2注册在component1组件上，那component2就是component1组件的子组件。
我的第一个组件
我的第二个组件
6.1 组件可以直接访问Vue实例的数据吗？比如直接用{{}}
答案是不能。
组件是一个单独功能模块的封装（相当于一个小的Vue实例），就是这个模块有属于自己的HTML模板，也有自己属性数据data。
我们看看下面的代码，我们在子组件直接用{{mes}}来使用父组件的data属性的值mes
{{mes}}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2MDeB1Lb-1612834014933)(vue笔记2_files/3.jpg)]
6.2 组件数据存放
组件对象也有一个data属性，但是data属性必须是一个函数，然后这个返回的对象，对象内部保证这数据
{{mes}}
总结
阿里十分注重你对源码的理解，对你所学，所用东西的理解，对项目的理解。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
t1
}
})
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2MDeB1Lb-1612834014933)(vue笔记2_files/3.jpg)]
6.2 组件数据存放
组件对象也有一个data属性，但是data属性必须是一个函数，然后这个返回的对象，对象内部保证这数据
{{mes}}
总结
阿里十分注重你对源码的理解，对你所学，所用东西的理解，对项目的理解。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
扫一扫
560
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
