组件的定义
实现应用中局部功能代码和资源的集合
组件的作用:复用编码,简化项目编码,提高运行效率
组件的基本使用
组件分为单文件组件和非单文件组件
单文件组件: 一个文件中只包含有一个组件
非单文件组件:一个文件中包含有n个组件
组件的使用分为三个步骤(以非单文件组件为例):
- 定义组件(创建组件)
const student = Vue.extend({
template: `
<div>
<h2>学生姓名:{{studentName}}</h2>
<h2>学生年龄:{{age}}</h2>
</div>
`,
data() {
return {
studentName: '张三',
age: 18
}
}
})
注意点:
1.data必须写成函数。为什么? ———— 避免组件被复用时,数据存在引用关系。
2.el不要写,为什么? ——— 最终所有的组件都要经过一个vm的管理,由vm中的el决定服务哪个容器。
- 注册组件
1.局部注册:靠new Vue的时候传入components选项
//创建实例
new Vue({
el: '#root',
//第二部:注册组件(局部注册)
components: {
student: student
},
})
2.全局注册:靠Vue.component(‘组件名’,组件)
//第二步:注册全局组件
Vue.component('hello', hello)
- 使用组件(写组件标签)
<div id="root">
<!-- 第三步:编写组件标签 -->
<student></student>
</div>
关于组件的注意点
1. 关于组件名:
1.一个单词组成:
第一种写法(首字母小写):school
第二种写法(首字母大写):School
2.多个单词组成:
第一种写法(kebab-case命名):my-school
第二种写法(CamelCase命名):MySchool (需要Vue脚手架支持)
备注:
(1).组件名尽可能回避HTML中已有的元素名称,例如:h2、H2都不行。
(2).可以使用name配置项指定组件在开发者工具中呈现的名字。
2. 关于组件标签:
第一种写法:
<div id="root">
<student></student>
</div>
第二种写法:
<div id="root">
<student/>
</div>
备注:不使用脚手架时,第二种写法会导致后续组件不能渲染。
3. 一个简写方式:
const school = Vue.extend(options) 可简写为:const school = options