-
组件化是 Vue.js 中的重要思想,它提供了一种抽象,让我们可以开发出一个个独立可复用的小组件来构造我们的应用
-
任何的应用都会被抽象成一颗组件树
组件化思想的应用:
-
有了组件化的思想,我们在之后的开发中就要充分的利用它
-
尽可能的将页面拆分成一个个小的、可复用的组件
-
这样让我们的代码更加方便组织和管理,并且扩展性也更强
组件的使用分成三个步骤:
-
创建组件构造器
-
注册组件
-
使用组件
上面注册组件的方式有些繁琐,Vue 提供了注册的语法糖:
- 主要是省去了调用
Vue.extend()
的步骤,而是可以直接使用一个对象来代替
语法糖注册全局组件和局部组件:
组件中 template 里的 HTML 代码是可以被分离出来的,Vue 提供了两种方案来定义 HTML 模块内容:
-
使用
<script>
标签 -
使用
<template>
标签
当我们通过调用 Vue.component()
注册组件时,组件的注册是全局的
- 这意味着该组件可以在任意 Vue 示例下使用
如果我们注册的组件是挂载在某个实例中, 那么就是一个局部组件
组件自己的数据存放在哪里呢?
-
组件对象也有一个 data 属性(也可以有 methods 等属性)
只是这个 data 属性必须是一个函数,而且这个函数返回一个对象,对象内部保存着数据
data 为什么是一个函数呢?
- 首先,如果不是一个函数,Vue 直接就会报错
- 其次,Vue 让每个组件对象都返回一个新的对象(利用函数的作用域使各个组件间互不影响),如果是同一个对象的,组件在多次使用后会相互影响
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210719170222528.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ==,size_1,color_FFFFFF,t_70)
如何进行父子组件间的通信呢?Vue 官方提到:
-
通过 props 向子组件传递数据
-
通过 事件 向父组件发送消息
父->子:props
在组件中,使用选项 props 来声明需要从父级接收到的数据
props 的值有两种方式:
-
方式一:字符串数组,数组中的字符串就是传递时的名称
-
方式二:对象,对象可以设置传递时的类型,也可以设置默认值等
一个最简单的 props 传递:
当需要对 props 进行类型等验证时,就需要对象写法了
验证支持的数据类型:
-
String
-
Number
-
Boolean
-
Array
-
Object
-
Date
-
Function
-
Symbol
-
当有自定义构造函数时,验证也支持自定义的类型
子->父:$emit()
props 用于父组件向子组件传递数据,还有一种比较常见的是子组件传递数据或事件到父组件中
自定义事件的流程:
-
在子组件中,通过
$emit()
来触发事件。 -
在父组件中,通过
v-on
来监听子组件事件。
有时候我们需要父组件直接访问子组件,子组件直接访问父组件,或者是子组件访问根组件
-
父组件访问子组件:使用
$children
或$refs
-
子组件访问父组件:使用
$parent
$children
this.$children
是一个数组类型,它包含所有子组件对象
我们这里通过一个遍历,取出所有子组件的 message 状态。
$refs
$children
的缺陷:通过 $children
访问子组件时,是一个数组类型,访问其中的子组件必须通过索引值,但是当子组件过多,我们需要拿到其中一个时,往往不能确定它的索引值,甚至还可能会发生变化。
有时候,我们想明确获取其中一个特定的组件,这个时候就可以使用 $refs
$refs
的使用:
-
$refs
和ref
指令通常是一起使用的 -
首先,我们通过
ref
给某一个子组件绑定一个特定的ID -
其次,通过
this.$refs.ID
就可以访问到该组件了![在这里插入图片描述]( )
$parents
通过 $parent
可以在子组件中直接访问父组件
注意事项:
-
尽管在 Vue 开发中允许通过
$parent
来访问父组件,但是在真实开发中尽量不要这样做 -
子组件应该尽量避免直接访问父组件的数据,因为这样耦合度太高了
如果将该子组件放在另外一个组件之内,很可能该父组件没有对应的属性,往往会引起问题
-
另外,如果通过
$parent
直接修改父组件的状态,那么父组件中的状态将变得飘忽不定,很不利于调试和维护
非父子组件关系包括多个层级的组件,也包括兄弟组件的关系。
在 Vue1.x 的时候,可以通过
$dispatch
和$broadcast
完成
$dispatch
用于向上级派发事件
$broadcast
用于向下级广播事件
- 但是在 Vue2.x 都被取消了
在 Vue2.x 中,有一种方案是通过中央事件总线,也就是一个中介来完成,但是这种方案和直接使用 Vuex 的状态管理方案还是逊色很多,并且 Vuex 提供了更多好用的功能,所以这里我们暂且不讨论这种方案,后续我们专门学习 Vuex 的状态管理。
编译作用域
官方给出了一条准则:父组件模板的所有东西都会在父级作用域内编译;子组件模板的所有东西都会在子级作用域内编译。
参考一个例子:
isShow 属性包含在组件中,也包含在 Vue 实例中,最终可以渲染出来,也就是使用的是 Vue 实例的属性。