前言
本文主要介绍属性、事件和插槽这三个vue基础概念、使用方法及其容易被忽略的一些重要细节。如果你阅读别人写的组件,也可以从这三个部分展开,它们可以帮助你快速了解一个组件的所有功能。
在这里插入图片描述
组件的分类
一般来说,Vue.js 组件主要分成三类:
由 vue-router 产生的每个页面,它本质上也是一个组件(.vue),主要承载当前页面的 HTML
结构,会包含数据获取、数据整理、数据可视化等常规业务。整个文件相对较大,但一般不会有 props 选项和 自定义事件,因为它作为路由的渲染,不会被复用,因此也不会对外提供接口
不包含业务,独立、具体功能的基础组件,比如日期选择器、模态框等。这类组件作为项目的基础控件,会被大量使用,因此组件的 API进行过高强度的抽象,可以通过不同配置实现不同的功能。比如笔者开源的 iView,就是包含了 50 多个这样基础组件的 UI 组件库。
业务组件。它不像第二类独立组件只包含某个功能,而是在业务中被多个页面复用的,它与独立组件的区别是,业务组件只在当前项目中会用到,不具有通用性,而且会包含一些业务,比如数据请求;而独立组件不含业务,在任何项目中都可以使用,功能单一,比如一个具有数据校验功能的输入框。
Vue.js 组件
组件(Component)是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素,封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树:
在这里插入图片描述
全局组件
所有实例都能用全局组件。
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
这些组件是全局注册的。也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中.
局部注册
var Child = {
template: ‘
}
new Vue({
// …
components: {
// 将只在父组件模板中可用
‘my-child’: Child
}
})
1
2
3
4
5
6
7
8
9
10
11
data 必须是一个函数 一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝:
var counter = {
template:<button @click="num++">{{num}}</button>
,
data:function(){return {num:1}}
}
new Vue({
el:"#app",
components:{
counter,
}
})
1
2
3
4
5
6
7
8
9
10
11
Prop
prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。
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
32
动态 Prop
类似于用 v-bind 绑定 HTML 特性到一个表达式,也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时,该变化也会传导给子组件:
Vue.component(‘example’, {
props: {
// 基础类型检测 (null
指允许任何类型)
propA: Number,
// 可能是多种类型
propB: [String, Number],
// 必传且是字符串
propC: {
type: String,
required: true
},
// 数值且有默认值
propD: {
type: Number,
default: 100
},