12 - Vue 学习笔记 - 组件化开发、全局与局部组件、父组件和子组件

组件化开发

什么是组件化？
人们面对复杂问题的处理方式：

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

组件化也是类似的思想:

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

我们将一个完整的页面分成很多个组件。每个组件都用于实现页面的一个功能块，而每一个组件又可以进行细分。

Vue 组件化思想

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

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

组件化思想的应用：

• 有了组件化的思想，我们在之后的开发中就要充分地利用它。
• 尽可能地将页面拆分成一个个小地，可复用地组件。
• 这样让我们地代码更加方便组织和管理，并且扩展性更强。

---

组件化的基本使用过程

组件化使用分成三个步骤：

1. 创建组件构造器 — 调用 Vue.extend() 方法创建组件构造器
2. 注册组件 — 调用 Vue.component() 方法注册组件
3. 使用组件 — 在 Vue 实例地作用范围内使用组件

<div id="app">
	<!-- 3. 使用组件	-->
	<my-cpn></my-cpn>
	<my-cpn></my-cpn>
	<my-cpn></my-cpn>
	<my-cpn></my-cpn>
</div>

<script src="../js/vue.js"></script>
<script>
	// 1. 创建组件构造器对象
	const cpnC = Vue.