第十节——Vue组件

一、什么是组件

组件(Component)是vue.js中很强大的一个功能，可以将一些可重用的代码进行封重用。 所有的Vue 组件同时也是Vue 的实例，可以接受使用相同的选项对象和提供相同的生命周期钩子。 一句话概括：组件就是可以扩展HTML元素，封装可重用的HTML代码，可以将组件看作自定义的HTML元素。在vue项目中，所有.vue结尾的文件都是一个组件

二、定义组件

1、局部组件

引入组件后，需要在components对象里进行注册，注册后可以直接进行使用

创建qf-button.vue文件

创建learn-component文件并引入

2、全局组件

全局组件注册后，使用时不需要额外的引入可以直接使用

创建qf-input.vue文件

在入口文件处引入

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import QfInput from './qf-input.vue'

const app = createApp(App)
/**
 * 使用component方法注册全局组件，接收两个参数
 * 第一个参数 组件的名字
 * 第二个参数 组件的值
 */
app.component('qf-input', QfInput)
app.mount('#app')

三、组件传值

1、父传子

在父组件的子组件标签上定义属性，子组件使用props接收

父组件传入

子组件接收

2、子传父

通过事件传递，子组件使用$emit传递一个事件给父组件。$emit第一个参数是事件名，第二个参数要传给父组件的参数。父组件在子组件标签上使用@接收传过来的事件

qf-input每次输入的时候把输入的内容传给父组件

子组件

父组件

3、祖孙传值

provide / inject 依赖注入

provide：可以让我们指定想要提供给后代组件的数据或方法

inject：在任何后代组件中接收想要添加在这个组件上的数据或方法，不管组件嵌套多深都可以直接拿来用

创建子组件child1.vue、创建孙组件child2.vue 按照等级依次引入

在最上级组件（爷爷组价）写入

孙组件接收child2.vue

provide / inject 使用场景

国际化

主题色切换

祖孙传值

$attrs

多层嵌套组件传递数据时，如果只是传递数据，而不做中间处理的话就可以用这个，比如父组件向孙子组件传递数据时

$attrs：包含父作用域里除 class 和 style 除外的非 props 属性集合。通过 this.$attrs 获取父作用域中所有符合条件的属性集合，然后还要继续传给子组件内部的其他组件，就可以通过 v-bind="$attrs"

爷爷组件

子组件

孙组件

4、兄弟组件传值

一般使用状态管理解决

event bus

EventBus 是中央事件总线，不管是父子组件，兄弟组件，跨层级组件等都可以使用它完成通信操作。

在 Vue 3 中，由于 Vue 2 中的全局事件总线（Vue.prototype.$emit 和 Vue.prototype.$on）被移除，我们需要使用其他方式来实现类似的功能。在 Vue 3 中，可以使用 mitt 这个第三方库来创建一个事件总线。

安装

npm install mitt

使用

在需要使用事件总线的地方导入和创建它

import mitt from 'mitt';
const eventBus = mitt();

发送事件

要发送事件，你可以使用 eventBus.emit(eventName, payload) 方法

eventBus.emit('eventName', payload);

监听事件

eventBus.on('eventName', (payload) => {
  // 处理事件的回调逻辑
});

取消监听

eventBus.off('eventName', handler);