【Vue3实践】（三）优雅使用VUE3 组件特性：组件定义、组件注册、事件监听、双向绑定

1.前言

由于在日常开发中会有一部分前端的开发任务，会涉及到Vue的项目的搭建、迭代、构建发布等操作，所以想系统的学习一下Vue相关的知识点，本专题会依照Vue的搭建、开发基础实践、进阶用法、打包部署的顺序进行记录。

主要内容与历史文章链接如下：

• Vue3搭建、路由配置与基本语法
• 响应式变量、双向绑定、计算属性、监听器
• 优雅使用VUE3 组件特性：组件定义、组件注册、事件监听、双向绑定
• 优雅使用VUE3 组件特性：组件插槽、属性透传、依赖注入、动态组件
• 环境变量、axios配置与打包部署

---

从前面两篇的内容中我们已经知道了Vue3的基本语法使用，以及响应式的核心特性，通过这些知识已经可以完成一个简单的页面了。但是在实际的开发中，我们的项目是由很多个页面组成的，每个页面中又可能会有特别多的功能需要实现。

当代码越写越多之后，可能就会发现，不同的页面中有一些功能是重复的，此时我们就可以考虑将这些重复的功能抽取出来，写成一个个的组件来进行复用。
组件除了可以复用代码的作用以外，还可以形成功能的封装，使项目中的一个个功能点由一盘散沙变得内聚，我们在后续的迭代过程中，这种内聚的组件可以大大的提高我们修改、拓展的效率，同时也能降低改出bug的概率。

组件相关的内容将会分为两篇来编写，本篇主要讲述以下内容：

• 组件的定义
• 组件的注册使用
• 父子组件通信
  • 父组件如何传递属性给子组件
  • 父组件如何监听子组件中的web事件
  • 父子组件的双向绑定如何实现

2.组件定义与注册

2.1.什么是组件

组件的定义是很宽泛的，我们任意打开一个页面，看到的每一个视图元素都可能是一个组件，例如在一个管理系统中，标题栏是一个组件，菜单栏是一个组件，Tab、列表、分页、表单甚至是一个简单的input输入框都可能是一个组件。

组件之间有父子关系、兄弟关系、祖孙关系等等，会像下图那样传递依赖：

我们需要做的，就是定义这一个一个的children，并处理它们的依赖关系以及组件之间的参数传递（通信）。接下来，我们先尝试定义一个组件。

2.2.定义组件

如果创建一个和父组件没有通信关系的组件，其实就是创建一个普通.vue文件，我们在前面两篇中就已经使用过了。例如我现在创建一个计数器组件，提供一个按钮和一个展示数字的块，当点击按钮的时候数字块上的数字就+1。

<template>
  <div>
    <button @click="add">点击 + 1button>
    <div>{{ count }}div>
  div>
template>

<script setup>
import { ref } from "vue";

const count = ref(0);

const add = () => {
  count.value++;
};
script>

这样一个组件就写好了，接下来试试如何将这个组件注册到其他的组件中去。

2.3.注册组件

2.3.1.局部注册

局部注册组件有两个步骤：

• 在js中import组件，并给组件命名
• 在