Vue项目注册组件
目录
引言
一、注册组件三大步骤
二、非单文件组件
（一）全局组件
（二）局部组件
（三）组件嵌套
（四）VueComponent
（五）一个重要的内置关系
（六）总结
（七）注意点
三、单文件组件
（一）第一步
（二）第二步
（三）总结
引言
关于vue项目组件的注册，以下是学习过程中的一些笔记，欢迎大家批评指正~
一、注册组件三大步骤
首先明确注册组件的三大步骤：
1、定义组件（创建组件）
2、注册组件
3、使用组件（写组件标签）
在这里会从非单文件组件和单文件组件进行知识的梳理。
二、非单文件组件
非单文件组件通俗的说就是一个文件中包含有多个组件。在这里将从注册全局组件和局部组件进行知识的梳理。
（一）全局组件
第一步 创建 school 组件。组件内容为：显示学校名称、学校地址（数据如何展现）以及点击按钮提示学校名称（方法如何调用）。
第一步 创建 school 组件
const school = Vue.extend({
template:` //使用模板语法
学校名称：{{shoolName}}
学校地址：{{shoolAddress}}
点我提示学校名 `,
//组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。
// el:'#root',
data(){
return{
schoolName:'xxx大学',
schoolAddress:'北京'
}
},
methods:{
showSchoolName(){
alert(this.schoolName)
}
}
})
第二步 注册全局组件 （ 区别 ）。使用Vue.component(第一参数指的是组件名,第二个参数指的具体是哪个组件)注册全局组件。
// Vue.component(第一参数指的是组件名,第二个参数指的具体是哪个组件)
Vue.component("shool",school)
第三步：使用组件 编写组件标签。
需要注意的是，创建 vm 的时候，已经通过 vm 决定所创建的组件服务于哪个容器了，在上面的步骤流程中，所创建的 school 组件是服务于 “id = root” 的这个容器。
上述第一步和第二步也可以进行合并
注册全局组件
将第一步和第二步合并 "school"---组件名 {}---组件相关的函数、内容
Vue.component( "school", {
template:` //使用模板语法
学校名称：{{schoolName}}
学校地址：{{schoolAddress}}
点我提示学校名 `,
//组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。
// el:'#root',
data(){
return{
schoolName:'xxx大学',
schoolAddress:'北京'
}
},
methods:{
showSchoolName(){
alert(this.schoolName)
}
}
})
（二）局部组件
第一步 创建 student 组件 。组件内容为：显示学生姓名、学生年龄（数据如何展现）。
const student = Vue.extend({
template:`
学生姓名：{{studentName}}
学生年龄：{{studentAge}}
`,
data(){
return {
studentName:'张三',
studentAge:18
}
}
})
第二步：注册组件（局部注册） （区别）。 传入components 选项注册student 组件
//创建vm
new Vue({
el:'#root', // 通过vm决定sdutent组件服务于`id = root `的容器
data:{
msg:'你好啊！'
},
//第二步：注册组件（局部注册） 区别
components:{
student // 简写
// student:student
}
})
new Vue({
el:'#root2',
})
第三步：使用组件 编写组件标签
全局组件和局部组件两者区别
1、全局注册：靠 Vue.component( '组件名'，组件 ) 或者 Vue.component( '组件名'，{组件相关的函数、内容} )进行注册。
2、局部注册：靠 new Vue的时候传入 components选项进行注册。
3、全局注册的组件可以服务于多个容器。如上述，school组件是全局注册的，因此在`id = root `和`id = root2 `的容器中都可以使用。
4、局部注册的组件只能服务于指定的容器。如上述，student组件（局部组件）是在 el 为 '#root' 的vm 中注册的，因此只能在`id = root `的容器中使用，在`id = root2 `是无法使用 student 组件。
（三）组件嵌套
定义一个student 组件
const student = Vue.extend({
name:'student',
template:`
学生姓名：{{name}}
学生年龄：{{age}}
`,
data(){
return {
name:'张三',
age:18
}
}
})
定义一个 school 组件，在定义school组件的时候嵌入student 组件。
//定义school组件
const school = Vue.extend({
name:'school',
template:`
学校名称：{{name}}
学校地址：{{address}}
// 使用 student 组件 （嵌入）
定义一个hello组件，该组件没有嵌入其他组件。
//定义hello组件
const hello = Vue.extend({
template:`{{msg}}
`,
data(){
return {
msg:'欢迎来到学习vue！'
}
}
})
定义一个app组件，app组件嵌入了school组件和hello组件。
//定义app组件
const app = Vue.extend({
template:`
注册使用app组件
//创建vm
new Vue({
// 可以这样使用app 组件，也可以在html里面使用
template:'
利用Vue.extend(options)定义组件，在定义的时候嵌入（使用）别的组件，需要在options中使用components注册需要嵌入的组件（如定义school组件时嵌入student组件和定义app组件时嵌入school组件）。
（四）VueComponent
定义 school 组件和 hello 组件，从这两个组件出发了解 VueCompnent 。
//定义school组件
const school = Vue.extend({
name:'school',
template:`
学校名称：{{name}}
学校地址：{{address}}
`,
data(){
return {
name:'xxx大学',
address:'北京'
}
},
methods: {
showName(){
console.log('showName',this)
}
},
})
// 打印school组件
console.log('这里是school组件',school)
//定义hello组件
const hello = Vue.extend({
template:`
{{msg}}
`,
data(){
return {
msg:'你好！'
}
},
})
// 打印school组件
console.log('这里是hello组件',hello)
总结
1、school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。打印如下：
这里是school组件 ƒ VueComponent (options) {
this._init(options);
}
2、我们只需要写Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options)。
3、特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！！两个组件的打印如下：
这里是school组件 ƒ VueComponent (options) {
this._init(options);
}
这里是hello组件 ƒ VueComponent (options) {
this._init(options);
}
4、关于this指向：
（1）组件配置中：
data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是 VueComponent实例对象。在 school 组件 methods 中打印 this 如下：
（2）new Vue(options)配置中：
data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是 Vue实例对象。
5、VueComponent的实例对象（也可称之为：组件实例对象）。Vue的实例对象，简称vm。
（五）一个重要的内置关系
（六）总结
1、如何定义一个组件？
使用 Vue.extend(options) 创建，其中 options和 new Vue(options)时传入的那个options几乎一样，但也有点区别，区别如下：
（1）el不要写，为什么？ ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
（2）data必须写成函数，为什么？ ———— 避免组件被复用时，数据存在引用关系。
（3）使用Vue.extend(options)创建组件，可以使用template配置组件结构。
2、如何注册组件？
（1）全局注册：靠Vue.component( '组件名'，组件 )
（2）局部注册：靠new Vue的时候传入components选项
3、编写组件标签：
（七）注意点
1、关于组件名:
一个单词组成：
第一种写法(首字母小写)：school
第二种写法(首字母大写)：School
多个单词组成：
第一种写法(kebab-case命名)：my-school
第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)
备注：
（1）组件名尽可能回避 HTML中已有的元素名称，例如：h2、H2都不行。
（2）可以使用 name配置项指定组件在开发者工具中呈现的名字。
2、关于组件标签:
第一种写法：
第二种写法：
备注：不用使用脚手架时，
3、一个简写方式：
const school = Vue.extend(options)可简写为：const school = options
三、单文件组件
单文件组件通俗的说就是一个文件中只包含一个组件，一个vue文件就可以封装为一个组件。接下来创建一个单文件组件的实例。
（一）第一步
创建一个school组件（其实就是创建一个School.vue文件）
学校名称：{{name}}
学校地址：{{address}}
（二）第二步
在需要用到 school组件的 vue文件中引入该组件，并且注册组件，注册之后就可以使用组件。
（三）总结
创建单文件组件还是跟着组件创建的三大步骤走的，创建组件、注册组件、（引入）使用组件，一个vue文件就可以封装成一个组件，在需要使用该组件的vue文件中引入对应的组件vue文件，然后使用components: { 组件名 } 对组件进行（局部）注册，需要注意的是，如果引入的组件是.js文件，该组件可以不用注册。