Vue组件化
# 3.1 组件化编程原理
# 3.1.1 模块
- 理解:向外提供特定功能的 js 程序,一般就是一个 js 文件
- 为什么:js 文件很多很复杂
- 作用:复用、简化 js 的编写,提高 js 运行效率
- 模块化:当应用中的 js 都以模块来编写的,那这个应用就是一个模块化的应用
# 3.1.2 组件
- 定义:用来实现局部功能的代码和资源的集合(html/css/js/image…)
- 为什么:一个界面的功能很复杂
- 作用:复用编码,简化项目编码,提高运行效率
- 组件化:当应用中的功能都是多组件的方式来编写的,那这个应用就是一个组件化的应用
# 3.2 非单文件组件
非单文件组件:一个文件中包含有 n 个组件
# 3.2.1 基本使用
- 定义组件
使用Vue.extend(options)创建,其中options和new Vue(options)时传入的options几乎一样,但也有点区别
- el不要写,因为最终所有的组件都要经过一个vm的管理,由vm中的el才决定服务哪个容器
- data必须写成函数,避免组件被复用时,数据存在引用关系
- 注册组件
- 局部注册:new Vue()的时候options传入components选项
- 全局注册:Vue.component('组件名',组件)
- 使用组件:编写组件标签如
<school></school>
# 3.2.3 组件注意事项
# 关于组件名
- 一个单词组成
- 第一种写法(首字母小写):school
- 第二种写法(首字母大写):School
- 多个单词组成
- 第一种写法(kebab-case 命名):my-school
- 第二种写法(CamelCase 命名):MySchool(需要Vue脚手架支持)
- 其他
- 组件名尽可能回避HTML中已有的元素名称,例如:h2、H2都不行
- 可以使用name配置项指定组件在开发者工具中呈现的名字
# 关于组件标签
- 第一种写法:
<school></school>
- 第二种写法:
<school/>
(需要Vue脚手架支持) - 备注:不使用脚手架时,
<school/>
会导致后续组件不能渲染 - 一个简写方式:const school = Vue.extend(options)可简写为const school = options,因为父组件components引入的时候会自动创建
# 3.2.4 VueComponent
- school 组件本质是一个名为VueComponent的构造函数,且不是程序员定义的,而是
Vue.extend()
生成的 - 我们只需要写
<school/>
或<school></school>
,Vue 解析时会帮我们创建 school 组件的实例对象,即Vue帮我们执行的new VueComponent(options)
- 每次调用Vue.extend,返回的都是一个全新的VueComponent,即不同组件是不同的对象
- 关于 this 指向
- 组件配置中data函数、methods中的函数、watch中的函数、computed中的函数 它们的 this 均是 VueComponent实例对象
- new Vue(options)配置中:data函数、methods中的函数、watch中的函数、computed中的函数 它们的 this 均是 Vue实例对象
- VueComponent的实例对象,以后简称vc(组件实例对象)Vue的实例对象,以后简称vm
- 一个重要的内置关系:
VueComponent.prototype.__proto__ === Vue.prototype
,让组件实例对象vc可以访问到 Vue原型上的属性、方法
# 3.3 单文件组件
# 3.3.1 vue文件组成
// 模板页面
<template>
<div id='Demo'>
<h2>学校名称:{{name}}</h2>
<h2>学校地址:{{address}}</h2>
<button @click="showName">点我提示学校名</button>
</div>
</template>
// JS模块对象
<script>
export default {
name:'School',
data() {
return {
name:'UESTC',
address:'成都'
}
},
methods: {
showName(){
alert(this.name)
}
},
}
</script>
// 样式
<style>
#Demo{
background: orange;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
# 3.3.2 基本使用
- 引入组件
- 映射成标签
- 使用组件标签
<template>
<div>
<!--使用组件标签-->
<School></School>
<Student></Student>
</div>
</template>
<script>
// 引入组件
import School from './School.vue'
import Student from './Student.vue'
export default {
name:'App',
// 映射成标签
components:{
School,
Student
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 3.4 ref属性
- ref被用来给元素或子组件注册引用信息(id的替代者)
- 应用在html标签上获取的是真实DOM元素,应用在组件标签上获取的是组件实例对象vc
- 使用方式
- 打标识:
<h1 ref="xxx"></h1>
或<School ref="xxx"></School>
- 获取:
this.$refs.xxx
- 打标识:
# 3.5 props 配置项
- props让组件接收外部传过来的数据
- 传递数据
<Demo name="xxx" :age="18"/>
这里age前加:,通过v-bind使得里面的18是数字 - 接收数据
- 第一种方式(只接收)props:['name', 'age']
- 第二种方式(限制类型)props:{name:String, age:Number}
- 第三种方式(限制类型、限制必要性、指定默认值
props: {
name: {
type: String, // 类型
required: true,// 必要性
default: 'cess'// 默认值
}
}
1
2
3
4
5
6
7
2
3
4
5
6
7
- props是只读的,Vue底层会监测你对props的修改,如果进行了修改,就会发出警告,若业务需求确实需要修改,那么请复制props的内容到data中,然后去修改data中的数据
# 3.6 mixin 混入
- 功能:可以把多个组件共用的配置提取成一个混入对象
- 使用方式
- 定义混入
- 使用混入
- 全局混入
Vue.mixin(xxx)
- 局部混入
mixins:['xxx']
- 全局混入
const mixin = {
data() {....},
methods: {....}
....
}
1
2
3
4
5
2
3
4
5
- 组件和混入对象含有同名选项时,这些选项将以恰当的方式进行“合并”,在发生冲突时以组件优先,但生命周期全都执行
# 3.7 plugin 插件
- 功能:用于增强Vue
- 本质:包含install方法的一个对象,install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据
- 定义插件(见下 src/plugin.js)
1
- 使用插件:
Vue.use()
上次更新: 2022/06/24, 10:36:25