组件和组件化
组件
定义：实现应用中局部(特定)功能代码和资源的集合
作用：复用编码，简化项目编码，提高运行效率
组件化
定义：当应用中的功能是多组件的方式来编写的，那这个应用就是一个组件化的应用
模块和模块化
模块
定义：一个模块一般就是一个js文件，用于向外提供特定功能的js程序
作用：复用js、简化js的编写、提高js的运行效率
模块化
定义：当应用中的js都已模块来编写，那这个应用就是一个模块化的应用
非单文件组件
定义：一个文件中包含n个组件，比如一个html文件中包含n个组件
单文件组件
定义：一个文件中只包含1个组件，比如一个vue文件中包含1个组件
组件的使用
三大步骤
第一步：定义组件（也就是创建组件）
第二步：注册组件
第三步：使用组件（写组件标签）
如何定义一个组件
使用Vue.extend(options)创建，其中options和new Vue实例时传入的配置属性几乎一样，但还有有所不同
不同点：
不写el，因为所有的组件都需要被一个vm管理，由vm决定服务于哪个容器
data必须写成函数形式，return一个对象，其中就是具体的属性，避免组件被复用时数据存在引用关系
注意：
使用template可以配置组件结构，使用
如何注册组件
局部注册：使用new Vue的时候传入components配置属性
全局注册：使用Vue.component('组件名',组件)
如何使用组件
在html文档中，把要使用的组件写为一个双标签
如：，<组件名></组件名>
<div id="root">
<h1>{{msg}}</h1>
<hr>
<!-- 第三步：编写组件标签 -->
<school></school>
<hr>
<student></student>
<hr>
<hello></hello>
</div>
<script>
// 第一步：创建组件
// 创建school组件
const school = Vue.extend({
// el:'#root',
// 在定义组件时，不用写el配置属性，因为所有的组件都需要被一个vm管理，由vm决定服务于哪个容器
data(){
return {
schoolName:'清华大学',
address:'北京'
}
},
template:`
<div>
<h2>学校名称：{{schoolName}}</h2>
<h2>学校地址：{{address}}</h2>
<button @click="showName">点我提示学校名</button>
</div>
`,
methods:{
showName(){
alert(this.schoolName);
}
}
});
// 创建student组件
const student = Vue.extend({
data(){
return {
studentName:'赵云',
age:18
}
},
template:`
<div>
<h2>学生姓名：{{studentName}}</h2>
<h2>学生年龄：{{age}}</h2>
</div>
`
})
// 创建hello组件
const hello = Vue.extend({
template:`
<div>
<h2>你好呀！{{name}}</h2>
</div>
`,
data(){
return {
name:'张飞'
}
}
});
// 第二步：全局注册组件
Vue.component('hello',hello);
// 创建vm
new Vue({
el:'#root',
data:{
msg:'hello world'
},
// 第二步：注册组件（局部注册）
components:{
school:school,
student:student
}
})
</script>
使用组件的几个注意事项
关于组件名
一个单词构成
第一种写法（首字母小写）：school
第二种写法（首字母大写）：School
多个单词构成
第一种写法（kebab-case命名）：my-school
第二种写法（CamelCase命名）：MySchool，这种方式必须要在Vue脚手架环境下
备注
组件名中尽可能的回避HTML中已有的元素名称，如h2、H2都不行
可以使用name配置属性指定组件在开发者工具中呈现的名字
关于组件标签
第一种写法：
第二种写法：
备注：在不使用脚手架时，会导致后续组件不能渲染
一个简写方式
const school = Vue.extend(options) 可简写为 const school = options
<div id="root">
<h1>{{msg}}</h1>
<hr>
<!-- <school></school> -->
<my-school></my-school>
</div>
<script>
// 全写
const school = Vue.extend({
name:'xuexiao',
data(){
return {
name:'清华大学'
}
},
template:`
<div>
<h2>{{this.name}}</h2>
</div>
`
});
// 简写
// const school = {
// data(){
// return {
// name:'清华大学'
// }
// },
// template:`
// <div>
// <h2>{{this.name}}</h2>
// </div>
// `
// }
new Vue({
el:'#root',
data:{
msg:'欢迎学习'
},
components:{
// school:school
'my-school':school
}
})
</script>
组件的嵌套
<body>
<div id="root">
<h1>{{msg}}</h1>
<hr>
<app></app>
</div>
<script>
// 定义学生组件
const student = Vue.extend({
data(){
return {
name:'赵云',
age:18
}
},
template:`
<div>
<h2>学生名字：{{this.name}}</h2>
<h2>学生年龄：{{this.age}}</h2>
</div>
`
});
// 定义学校组件
const school = Vue.extend({
data(){
return {
name:'清华大学',
address:'北京'
}
},
template:`
<div>
<h2>学校名称：{{this.name}}</h2>
<h2>学校地址：{{this.address}}</h2>
<student></student>
</div>
`,
components:{
student
}
});
// 定义hello组件
const hello = Vue.extend({
template:`
<div>
<h2>你好呀！{{name}}</h2>
</div>
`,
data(){
return {
name:'张飞'
}
}
});
// 定义app组件
const app = Vue.extend({
template:`
<div>
<hello></hello>
<school></school>
</div>
`,
components:{
school,
hello
}
});
new Vue({
el:'#root',
data:{
msg:'欢迎学习'
},
components:{app}
})
</script>
</body>
关于VueComponent
1、school组件本质上是一个名为VueComponent的构造函数，并且不是程序员自己定义的，是Vue.extend生成的
2、所以我们在写组件的标签时(或)，Vue解析时会帮我们创建这个组件的实例对象，也就是Vue帮我们执行了new VueComponent(options)
3、注意，每次调用Vue.extend，返回的都是一个全新的VueComponent
4、关于this的指向
组件配置中的this：
data、methods、watch、computed中的函数的this都是VueComponent实例对象
new Vue()配置中的this：
data、methods、watch、computed中的函数的this都是Vue实例对象(vm)
5、VueComponent的实例对象，也可以叫组件实例对象
Vue的实例对象，简称vm
6、VueComponent.prototype.proto=== Vue.protopyte
让组件实例对象可以访问到Vue原型中国的属性和方法
