Vue3开发之components组件
前言
开发过程中我们会经常遇到一些复杂的页面，而这些页面大部分由一个个小部分组合起来的，而且不同页面中可能有些部分是一样的，所以我们通常会将这些部分封装成组件。在Vue中，我们可以使用components组件(模板)来实现。
实现一个组件
一个组件其实就是一个vue文件，简单示例（header.vue）如下：
<script setup></script><template><div class="header"></div></template><style scoped lang="less">.header {position: absolute;width: 100%;height: 80px;background: linear-gradient(180deg,rgba(0, 0, 0, 0.6) 0%,rgba(0, 0, 0, 0) 100%);}</style>
注册使用
基于script setup可以自动注册组件，只需要import即可使用，如下：
<script setup>import Header from "./Header.vue";</script><template><div class="container"><Header></Header></div></template><style scoped lang="less">.container {width: 100%;height: 100%;}</style>
数据
可以通过Prop向组件传递数据，先在组件中定义，如下：
<script setup>const props = defineProps({title: String,userInfo: Object});function doSomething(){if(props.userInfo.isVip){...}}</script><template><div class="header">{{props.title}}</div></template><style scoped lang="less">...</style>
这里定义了一个title属性，是一个字符串；一个userInfo属性，是一个对象，然后在组件中就可以通过props.xxx来使用这些属性。
那么如何将数据传递给这些属性呢，直接通过v-bind绑定数据即可，如下：
<script setup>import Header from "./Header.vue";let userInfo;let title;</script><template><div class="container"><Header :title="title" :userInfo="userInfo"></Header></div></template><style scoped lang="less">...</style>
这里使用的是v-bind的缩写。v-bind绑定后面双引号中是表达式，所以如果类型是：
数值：
:count="3"布尔值：
:isVip="true"数组：
:array="[1,2,3]"对象：
:info="{name:'名字',isVip:true}"
其他就不一一列举了。
Props是支持类型如下：
String
Number
Boolean
Array
Object
Date
Function
Symbol。
Props支持类型检查，同时支持默认值，如下：
props: {// 基础的类型检查 (`null` 和 `undefined` 值会通过任何类型验证)propA: Number,// 多个可能的类型propB: [String, Number],// 必填的字符串propC: {type: String,required: true},// 带有默认值的数字propD: {type: Number,default: 100},// 带有默认值的对象propE: {type: Object,// 对象或数组的默认值必须从一个工厂函数返回default() {return { message: 'hello' }}},// 具有默认值的函数propG: {type: Function,// 与对象或数组的默认值不同，这不是一个工厂函数——这是一个用作默认值的函数default() {return 'Default function'}}}
Props是单向数据流，这样可以防止子组件意外变更父组件的状态，每当父组件发生变更，子组件所有Props都会刷新到最新值。所以子组件中不能更改Props的属性，否则会在控制台警告。
事件
数据传递清楚了，那么如何响应组件的一些自定义事件呢？通过emits来定义事件，如下：
<script setup>const emit = defineEmits(["onSelected"]);function selectItem(item){emit("onSelected", item);}</script><template><div class="header" >...</div></template><style scoped lang="less">...</style>
这里定义了一个onSelected事件，当组件中触发selectItem函数的时候就会执行这个事件。
在父组件中则通过v-on来绑定事件，如下：
<script setup>import Header from "./Header.vue";function headerSelected(item){}</script><template><div class="container"><Header @onSelected="headerSelected"></Header></div></template><style scoped lang="less">...</style>
这里同样是v-on的缩写形式，这样就绑定了事件。事件同样可以验证，这里就不细说了。
v-model
v-model是双向数据绑定，默认情况下，组件上的 v-model 使用 modelValue 作为 prop 和 update:modelValue 作为事件。比如有一个title属性：
<my-component v-model:title="bookTitle"></my-component>那么在子组件中就可以这样做：
<script setup>const props = defineProps({title: String});const emit = defineEmits(["update:title"]);</script><template><div class="header" >...</div></template><style scoped lang="less">...</style>
这样子组件中可以通过update:title来同步title数据。
插槽
如果子组件中部分区域是不定的，需要父组件来实现，那么怎么办？这就需要用到插槽slot，插槽使用很简单，如下：
<script setup>...</script><template><div class="header" ><slot>default</slot></div></template><style scoped lang="less">...</style>
这里定义了一个插槽，并且指定了一个默认内容，在父组件中：
<script setup>import Header from "./Header.vue";</script><template><div class="container"><Header>newtitle</Header></div></template><style scoped lang="less">...</style>
这样插槽就被“newtitle”这个字符串替代，如果这里没有任何内容<Header></Header>则显示默认内容，即"default"。
插槽中不仅是字符串，可以是html或其他组件，比如：
<Header><button>submit</botton></Header>
当然默认内容也可以是html。
具名插槽
一个组件里可以有多个插槽，比如左边栏右边栏等，这样就需要具名插槽来区分，如下：
<script setup>...</script><template><div class="header" ><div name="leftbar" ><slot>left</slot></div><div name="rightbar" ><slot>right</slot></div></div></template><style scoped lang="less">...</style>
使用的时候需要用v-slot指令，并且一定是<template>元素，因为v-slot只能添加在<template>上，如下：
<script setup>import Header from "./Header.vue";</script><template><div class="container"><Header><template v-slot:leftbar ><button>left</button></template><template v-slot:rightbar ><button>right</button></template></Header></div></template><style scoped lang="less">...</style>
插槽名也可以是动态的<template v-slot:[dynamicSlotName] >。v-slot也可以缩写成“#”，如<template #leftbar >。
调用子组件方法
上面事件章节说的是父组件响应子组件的事件，也就是说是子组件调用父组件的方法。那么父组件如何调用子组件的方法？
Expose
首先子组件的方法需要暴露出去，如下：
<script setup>defineExpose({onEvent});function onEvent(event) {console.log(`header: ${event}`);}</script><template><div class="header" >...</div></template><style scoped lang="less">...</style>
然后在父组件中为子组件添加ref属性，然后通过ref()函数获取对象执行方法即可，如下：
<script setup>import Header from "./Header.vue";const headerRef = ref();function headerEvent(event){headerRef.value.onEvent(event);}</script><template><div class="container"><Header ref="headerRef">...</Header></div></template><style scoped lang="less">...</style>
上面header的ref属性是“headerRef”，所以变量名也保持一致，即const headerRef = ref();，然后就可以通过headerRef.value执行暴露出来的方法了。
如果有多个子组件，都设置了ref属性，则定义多个变量即可，如下：
const headerRef = ref();const footerRef = ref();
EventBus
更简单的方法是使用EventBus即可完成组件间通信，使用也非常简单，参考官方文档即可 https://www.npmjs.com/package/events
我们可以简单封装一下以便使用，如下：
import EventEmitter from "events";const eventEmitter = new EventEmitter();export const WsEvent = {emit: data => {eventEmitter.emit("wsevent", data);},on: callback => {eventEmitter.on("wsevent", callback);}};
推荐阅读
扫码关注公众号，发送“电子书”获取经典学习资料大全。