1. 认识组件化

什么是组件化？

人面对复杂问题的处理方式：

  • 任何一个人处理信息的逻辑能力都是有限的
  • 所以，当面对一个非常复杂的问题时，我们不太可能一次性搞定一大堆的内容。
  • 但是，我们人有一种天生的能力，就是将问题进行拆解。
  • 如果将一个复杂的问题，拆分成很多个可以处理的小问题，再将其放在整体当中，你会发现大的问题也会迎刃而解。

组件化也是类似的思想：

  • 如果我们将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展。
  • 但如果，我们讲一个页面拆分成一个个小的功能块，每个功能块完成属于自己这部分独立的功能，那么之后整个页面的管理和维护就变得非常容易了。

Vue组件化思想

组件化是Vue.js中的重要思想

  • 它提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用。
  • 任何的应用都会被抽象成一颗组件树。

2. 组件化基础

注册组件

注册组件的基本步骤
组件的使用分成三个步骤：

  • 创建组件构造器
  • 注册组件
  • 使用组件

注册组件步骤解析

  1. Vue.extend()：
  • 调用Vue.extend()创建的是一个组件构造器。
  • 通常在创建组件构造器时，传入template代表我们自定义组件的模板。
  • 该模板就是在使用到组件的地方，要显示的HTML代码。
  • 事实上，这种写法在Vue2.x的文档中几乎已经看不到了，它会直接使用下面我们会讲到的语法糖。
  1. Vue.component()：
  • 调用Vue.component()是将刚才的组件构造器注册为一个组件，并且给它起一个组件的标签名称。
  • 所以需要传递两个参数：1、注册组件的标签名 2、组件构造器
  1. 组件必须挂载在某个Vue实例下，否则它不会生效。

全局和局部组件

  • 当我们通过调用Vue.component()注册组件时，组件的注册是全局的，这意味着该组件可以在任意Vue示例下使用。
  • 如果我们注册的组件是挂载在某个实例中, 那么就是一个局部组件

父组件和子组件：

  • 组件和组件之间存在层级关系
  • 而其中一种非常重要的关系就是父子组件的关系

父子组件错误用法：以子标签的形式在Vue实例中使用

  • 因为当子组件注册到父组件的components时，Vue会编译好父组件的模块
  • 该模板的内容已经决定了父组件将要渲染的HTML（相当于父组件中已经有了子组件中的内容了）
  • 是只能在父组件中被识别的。
  • 类似这种用法，是会被浏览器忽略的。

注册组件语法糖

主要是省去了调用Vue.extend()的步骤，而是可以直接使用一个对象来代替。

模板的分离写法

Vue提供了两种方案来定义HTML模块内容：

  • 使用

组件的其他属性

组件可以访问Vue实例数据吗?
组件是一个单独功能模块的封装：

  • 这个模块有属于自己的HTML模板，也应该有属性自己的数据data。
    组件中的数据是保存在哪里呢？顶层的Vue实例中吗？
  • 我们先来测试一下，组件中能不能直接访问Vue实例中的data

组件数据的存放
组件自己的数据存放在哪里呢?

  • 组件对象也有一个data属性(也可以有methods等属性，下面我们有用到)
  • 只是这个data属性必须是一个函数
  • 而且这个函数返回一个对象，对象内部保存着数据

为什么是一个函数呢?
为什么data在组件中必须是一个函数呢?

  • 首先，如果不是一个函数，Vue直接就会报错。
  • 其次，原因是在于Vue让每个组件对象都返回一个新的对象，因为如果是同一个对象的，组件在多次使用后会相互影响。

数据传递

【Vue2】三. 组件化开发_封装

父级向子级传递

如何进行父子组件间的通信呢？Vue官方提到

  • 通过props向子组件传递数据
  • 通过事件向父组件发送消息

props基本用法
在组件中，使用选项props来声明需要从父级接收到的数据。
props的值有两种方式：

  • 方式一：字符串数组，数组中的字符串就是传递时的名称。
  • 方式二：对象，对象可以设置传递时的类型，也可以设置默认值等。

验证都支持哪些数据类型呢？

  • String
  • Number
  • Boolean
  • Array
  • Object
  • Date
  • Function
  • Symbol

    • 【Vue2】三. 组件化开发_vue_02

子级向父级传递

什么时候需要自定义事件呢？

  • 当子组件需要向父组件传递数据时，就要用到自定义事件了。
  • 我们之前学习的v-on不仅仅可以用于监听DOM事件，也可以用于组件间的自定义事件。

自定义事件的流程：

  • 在子组件中，通过$emit()来触发事件。
  • 在父组件中，通过v-on来监听子组件事件。

父子组件的访问

父子组件的访问方式： $children
有时候我们需要父组件直接访问子组件，子组件直接访问父组件，或者是子组件访问跟组件。

  • 父组件访问子组件：使用$children或 $refs
  • 子组件访问父组件：使用$parent

我们先来看下$children的访问

  • this.$children是一个数组类型，它包含所有子组件对象。

$children的缺陷：

  • 通过$children访问子组件时，是一个数组类型，访问其中的子组件必须通过索引值。
  • n但是当子组件过多，我们需要拿到其中一个时，往往不能确定它的索引值，甚至还可能会发生变化。
  • 有时候，我们想明确获取其中一个特定的组件，这个时候就可以使用$refs
    $refs的使用：
  • $refs和ref指令通常是一起使用的。
  • 首先，我们通过ref给某一个子组件绑定一个特定的ID。
  • 其次，通过this.$refs.ID就可以访问到该组件了。

父子组件的访问方式： 【Vue2】三. 组件化开发_数据_03parent
注意事项：

  • 尽管在Vue开发中，我们允许通过$parent来访问父组件，但是在真实开发中尽量不要这样做。
  • 子组件应该尽量避免直接访问父组件的数据，因为这样耦合度太高了。
  • 如果我们将子组件放在另外一个组件之内，很可能该父组件没有对应的属性，往往会引起问题。
  • 另外，更不好做的是通过$parent直接修改父组件的状态，那么父组件中的状态将变得飘忽不定，很不利于我的调试和维护。

非父子组件通信

在Vue1.x的时候，可以通过【Vue2】三. 组件化开发_vue_04broadcast完成

  • $dispatch用于向上级派发事件
  • $broadcast用于向下级广播事件
  • 但是在Vue2.x都被取消了
    在Vue2.x中，有一种方案是通过中央事件总线，也就是一个中介来完成。
  • 但是这种方案和直接使用Vuex的状态管理方案还是逊色很多。
  • 并且Vuex提供了更多好用的功能，所以这里我们暂且不讨论这种方案，后续我们专门学习Vuex的状态管理。

3. 组件化高级

插槽slot

编译作用域

  • 父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。
  • 而我们在使用的时候，整个组件的使用过程是相当于在父组件中出现的。
  • 那么他的作用域就是父组件，使用的属性也是属于父组件的属性。
  • 因此，isShow使用的是Vue实例中的属性，而不是子组件的属性。

为什么使用slot

组件的插槽：

  • 组件的插槽也是为了让我们封装的组件更加具有扩展性。
  • 让使用者可以决定组件内部的一些内容到底展示什么。

如何去封装这类的组件呢？

  • 它们也很多区别，但是也有很多共性。
  • 如果，我们每一个单独去封装一个组件，显然不合适：比如每个页面都返回，这部分内容我们就要重复去封装。
  • 但是，如果我们封装成一个，好像也不合理：有些左侧是菜单，有些是返回，有些中间是搜索，有些是文字，等等。

如何封装合适呢？抽取共性，保留不同。

  • 最好的封装方式就是将共性抽取到组件中，将不同暴露为插槽。
  • 一旦我们预留了插槽，就可以让使用者根据自己的需求，决定插槽中插入什么内容。
  • 是搜索框，还是文字，还是菜单。由调用者自己来决定。

slot的基本使用

了解了为什么用slot，我们再来谈谈如何使用slot？

  • 在子组件中，使用特殊的元素就可以为子组件开启一个插槽。
  • 该插槽插入什么内容取决于父组件如何使用。

我们通过一个简单的例子，来给子组件定义一个插槽：

  • 中的内容表示，如果没有在该组件中插入任何其他内容，就默认显示该内容
  • 有了这个插槽后，父组件如何使用呢？

slot的具名插槽

具名插槽slot
当子组件的功能复杂时，子组件的插槽可能并非是一个。

  • 比如我们封装一个导航栏的子组件，可能就需要三个插槽，分别代表左边、中间、右边。
  • 那么，外面在给插槽插入内容时，如何区分插入的是哪一个呢？
  • 这个时候，我们就需要给插槽起一个名字

slot作用域插槽

父组件替换插槽的标签，但是内容由子组件来提供。

在父组件使用我们的子组件时，从子组件中拿到数据：

  • 我们通过获取到slotProps属性
  • 在通过slotProps.data就可以获取到刚才我们传入的data了

动态组件

异步组件

4. 组件声明周期