vue3组件化开发、全局与局部组件、父组件和子组件

组件化开发

什么是组件化？

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

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

组件化也是类似的思想:

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

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

现在可以说整个的大前端开发都是组件化的天下，无论从三大框架（Vue、React、Angular），还是跨平台方案的Flutter，甚至是移动端都在转向组件化开发，包括小程序的开发也是采用组件化开发的思想。

所以，学习组件化最重要的是它的思想，每个框架或者平台可能实现方法不同，但是思想都是一样的。

• 我们需要通过组件化的思想来思考整个应用程序：
• 我们将一个完整的页面分成很多个组件；
• 每个组件都用于实现页面的一个功能块；
• 而每一个组件又可以进行细分；
• 而组件本身又可以在多个地方进行复用；

组件化是Vue、React、Angular的核心思想：

前面我们的createApp函数传入了一个对象App，这个对象其实本质上就是一个组件，也是我们应用程序的根组件；

组件化提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用；

任何的应用都会被抽象成一颗组件树；

注册组件的方式

如果我们现在有一部分内容（模板、逻辑等），我们希望将这部分内容抽取到一个独立的组件中去维护，这个时候如何注册一个组件呢？

注册组件分成两种：

全局组件：在任何其他的组件中都可以使用的组件；
局部组件：只有在注册的组件中才能使用的组件；

组件化的基本使用过程
组件化使用分成三个步骤：

创建组件构造器 — 调用 Vue.extend() 方法创建组件构造器
注册组件 — 调用 Vue.component() 方法注册组件
使用组件 — 在 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.extend({
		template: `
			<div>
				<h2>我是标题</h2>
				<p>我是内容，哈哈哈</p>
				<p>我是内容，嘻嘻嘻</p>
			</div>`
	});
	
	// 2. 注册组件
	Vue.component('my-cpn', cpnC);
	
	const app = new Vue({
		el: "#app",
		data: {
			message: "hello"
		}
	});
</script>

template 的值也使用了 ES6 的语法，使用 tab 键上面的那个符号 ` 引起来的字符串，可以直接换行，看得更清楚。

我们可以发现，我们创建了一个组件，并且注册，之后使用时，只需要很少的代码，就可以重复做很多事情。

注册组件步骤解析

Vue.extend() ：

• 调用 Vue.extend() 创建的是一个组件构造器/
• 通常在创建组件构造器时，传入 template 代表我们自定义组件的模板。
• 改模板就是在使用到组件的地方，要显示的 HTML 代码。
• 事实上，这种写法在 Vue2.x 文档中几乎以及看不到了，因为会使用到下面学到的语法糖。

Vue.component()：

• 调用 Vue.component() 是将刚才的组件构造器注册为一个组件，并且给它起一个组件的标签名称。
• 所以需要传递两个参数：1、 注册主键的标签名。 2、组件构造器。

组件必须挂载在某个 Vue 实例下，否则它不会生效

<div id="app">
	<my-cpn></my-cpn> <!-- 生效 -->
	<div>
		<div>
			<my-cpn></my-cpn> <!-- 生效 -->
		</div>
	</div>
</div>

<my-cpn></my-cpn> <!-- 无效 -->

全局组件与局部组件

注册全局组件

我们先来学习一下全局组件的注册：

• 全局组件需要使用我们全局创建的app来注册组件；
• 通过component方法传入组件名称、组件对象即可注册一个全局组件了；

之后，我们可以在App组件的template中直接使用这个全局组件：

全局组件的逻辑

当然，我们组件本身也可以有自己的代码逻辑： 比如自己的data、computed、methods等等

组件的名称

在通过app.component注册一个组件的时候，第一个参数是组件的名称，定义组件名的方式有两种：

方式一：使用kebab-case（短横线分割符）

当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case

方式二：使用PascalCase（驼峰标识符）

当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说 my-component-name 和 MyComponentName都是可接受的；

注册局部组件

全局组件往往是在应用程序一开始就会全局组件完成，那么就意味着如果某些组件我们并没有用到，也会一起被注册：

• 比如我们注册了三个全局组件：ComponentA、ComponentB、ComponentC；
• 在开发中我们只使用了ComponentA、ComponentB，如果ComponentC没有用到但是我们依然在全局进行了注册，那么就意味着类似于webpack这种打包工具在打包我们的项目时，我们依然会对其进行打包；
• 这样最终打包出的JavaScript包就会有关于ComponentC的内容，用户在下载对应的JavaScript时也会增加包的大小；

所以在开发中我们通常使用组件的时候采用的都是局部注册：

• 局部注册是在我们需要使用到的组件中，通过components属性选项来进行注册；
• 比如之前的App组件中，我们有data、computed、methods等选项了，事实上还可以有一个components选 项；
• 该components选项对应的是一个对象，对象中的键值对是 组件的名称: 组件对象；

局部组件注册代码

<div id="app">
	<cpn></cpn>
	<cpn2></cpn2>
</div>

<hr>

<div id="app2">
	<cpn></cpn>
	<cpn2></cpn2> <!-- 无法使用，只是一个普通的标签 -->
</div>

<script src="../js/vue.js"></script>
<script>
	// 1. 创建组件构造器
	const cpnC = Vue.extend({
		template: `
			<div>
				<h2>我是全局组件</h2>
			</div>
		`
	})
	
	const cpnC2 = Vue.extend({
		template: `
			<div>
				<h2>我是局部组件</h2>
			</div>
		`
	})
	// 2. 注册组件(全局组件，意味着可以在多个 Vue 实例下面使用)
	// 全局组件
	Vue.component('cpn', cpnC);
	
	const app = new Vue({
		el: "#app",
		data: {
			message: "hello"
		},
		// 局部组件
		components: {
			// cpn 使用组件时的标签名
			cpn2: cpnC2
		}
	});
	
	const app2 = new Vue({
		el: '#app2'
	})
</script>

可以看出来，在 Vue 实例里面注册的组件是局部组件，只能当前实例对象使用。

父组件和子组件

在前面我们看到了组件树：

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

我们通过代码来看看如何实现这种层级关系

<div id="app">
	<!-- 无法使用 cpn1-->
	<cpn1></cpn1>
	<cpn2></cpn2>
</div>
<script src="../js/vue.js"></script>
<script>
	// 1. 创建第一个组件构造器(子组件)
	const cpnC1 = Vue.extend({
		template: `
			<div>
				<h2>我是标题1</h2>
				<p>我是内容，哈哈哈</p>
			</div>
		`
	});
	
	// 2. 创建第二个组件构造器(父组件)
	const cpnC2 = Vue.extend({
		template: `
			<div>
			<h2>我是标题2</h2>
			<p>我是内容，嘻嘻嘻</p>
			<cpn1></cpn1>
			</div>
		`,
		components: {
			cpn1: cpnC1
		}
	});
	// 我们也可以把 Vue 实例当成一个 root 组件
	const app = new Vue({
		el: "#app",
		data: {
			message: "hello"
		},
		components: {
			cpn2: cpnC2
		}
	});
</script>