目录
前言：一、什么是组件二、注册组件1. 全局注册2. 局部注册
二、传递数据【父 -> 子】1. 字符串数组的形式2. 对象的形式
三、组件事件【子 -> 父】1. 字符串数组式声明自定义事件2. 【子组件】触发组件事件3. 【父组件】监听子组件自定义事件4. 组件事件例子
总结：
前言：
在编写vue里的SPA（Single Page Application单页面应用）时，我们始终绕不开组件的使用，Vue3 里有一些重要更新，在这里分享给大家。
一、什么是组件
组件（Component）是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素，封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：
组件就相当于页面的零件，当做正常的标签使用，不过能够进行自定义的数据传输和事件监听。 组件内也能使用其他的组件，任意处都能够使用。
二、注册组件
一个 Vue 组件在使用前需要先被 “注册”，这样 Vue 才能在渲染模板时找到其对应的实现；组件注册有两种方式：全局注册、局部注册
1. 全局注册
可使用 app.component(name, Component)注册组件的方法，在此应用的任意组件的模板中使用
name：注册的名字Component：需要注册的组件
// 在 main.js 中注册全局组件
import { createApp } from 'vue'
import App from './App.vue'
// 1：引入需要被注册的组件
import Login from './components/Login.vue'
const app = createApp(App)
// 2：全局注册组件
app.component('MLogin', Login)
app.mount('#app')
// 我们使用注册的组件
登录系统
2. 局部注册
局部注册的组件需要在使用它的父组件中显式导入，并且只能在该父组件中使用
在组合式 API 中的
登录系统
二、传递数据【父 -> 子】
如果父组件向子组件进行传递数据，那么我们需要在子组件中声明 props 来接收传递数据的属性，可采用字符串数组式或对象式来声明 props 父组件向子组件传递数据，在使用组件 let 的标签上采用属性方式传递的 props 值，可使用 v-bind: 或 : 来绑定属性 组件中 props 中的数据是只读的，不可直接更改，只能通过父组件进行更改
声明与使用
在选项式 API 中 1. 我们可以提供 props 选项来声明接收传递的数据 2. 在 JS 中可使用 this.$props 来访问声明的自定义的属性 3. 在视图模板中，可直接访问 props 中声明的自定义属性在组合式 API 中 1. 我们可以采用 defineProps 宏来声明接收传递的数据 2. 在 JS 中可使用 defineProps 返回的对象来访问声明的自定义的属性 3. 在视图模板中，可直接访问 defineProps 中声明的自定义属性
1. 字符串数组的形式
// 字符串数组的形式
例子：
// 父组件
主题：
阴影：
按钮文本：
// 子组件
{{ title }}
2. 对象的形式
对象形式声明的 props，可以对传来的值进行校验，如果传入的值不满足类型要求，会在浏览器控制台中抛出警告来提醒使用者 对象形式声明的 props，key 是 prop 的名称，值则为约束的条件
对象中的属性：
type：类型，如 String、Number、Boolean、Array、Object、Date、Function、Symbol default：默认值；对象或者数组应当用工厂函数返回 required：是否必填，布尔值 validator：自定义校验，函数类型
例子：
// 父组件
主题：
阴影：
按钮文本：
// 子组件
{{ title }}
注意：
所有 prop 默认都是可选的，除非声明了 required: true除 Boolean 外的未传递的可选prop将会有一个默认值 undefinedBoolean 类型的未传递 prop 将被转换为 false；当 prop 的校验失败后，Vue 会抛出一个控制台警告【在开发模式下】注意 prop 的校验是在组件实例被创建之前 1. 在选项式 API 中，实例的属性（比如 data、computed 等) 将在 default 或 validator 函数中不可用 2. 在组合式 API 中，defineProps 宏中的参数不可以访问
对象式声明自定义事件
采用对象式声明自定义事件，还可以进行校验传递的参数是否符合预期要求 对象式声明自定义事件中，属性名为自定义事件名，属性值则是是否验证传递的参数：
属性值为 null 则不需要验证属性值为函数时，参数为传递的数据，函数返回 true 则验证通过，返回 false 则验证失败，验证失败可以用警告语句提示开发者【注意：无论是 true 还是 false 都会继续执行下去的，父组件都会获取到传递的值】
2. 【子组件】触发组件事件
在选项式 API 中，可通过组件当前实例 this.$emit(event, ...args) 来触发当前组件自定义的事件 在组合式 API 中，可调用 defineEmits 宏返回的 emit(event, ...args) 函数来触发当前组件自定义的事件 其中上方两个参数分别为：
event：触发事件名，字符串类型...args：传递参数，可没有，可多个
3. 【父组件】监听子组件自定义事件
使用 v-on:event="callback" 或者 @event="callback" 来监听子组件是否触发了该事件
event：事件名字（camelCase 形式命名的事件，在父组件中可以使用 kebab-case 形式来监听）callback：回调函数，如果子组件触发该事件，那么在父组件中执行对应的回调函数，回调函数声明参数可自动接收到触发事件传来的值
开始年龄：{{ startAge }}
结束年龄：{{ endAge }}
4. 组件事件例子
字符串数组式声明自定义事件
// 父组件
{{ student }}
@change-student="getNewStudent" @change-age-and-name="getNewAgeAndName" @change-age="getNewAge" /> // 子组件 更改年龄和名字 更改学生（验证通过） 更改学生（验证失败） 对象式声明自定义事件 // 父组件 {{ student }}
@change-student="getNewStudent" @change-age-and-name="getNewAgeAndName" @change-age="getNewAge" /> // 子组件 更改年龄和名字 更改学生（验证通过） 更改学生（验证失败） 总结： 欢迎大家加入我的社区，在社区中会不定时发布一些精选内容：https://bbs.csdn.net/forums/db95ba6b828b43ababd4ee5e41e8d251?category=10003 以上就是 Vue3 中组件的使用（上），不懂得也可以在评论区里问我或私聊我询问，以后会持续发布一些新的功能，敬请关注。 我的其他文章：https://blog.csdn.net/weixin_62897746?type=blog 参考文章
您阅读本篇文章共花了：
发表评论