vue3组件间通信

目录

父子组件

1.props（父传子）

2.emit（子传父）

3.ref（子传父）

4.provide / inject（祖孙、父子组件）

兄弟组件

1.mitt

使用方法1：单文件方法

使用方法2：全局挂载使用

---

父子组件

1.props（父传子）

props是最常见的父子组件通信的方式

父组件：

子组件：（Demo09b组件）

在单文件中使用 // ---------父级组件中-------- // 在父级组件中，使用子级的自定义事件，在html中去写@自定义事件名称=事件名称(就是在子组件中emits的第一个参数)

(2)用法二：使用modelValue直接更新父组件数据

父组件：

//结构  
  

//逻辑
let test =ref()

子组件

//逻辑
const props = defineProps({
test:'',
})
const emit = defineEmits(['update:test']);  //这个test就是接收的props
const resetTest =() =>{
//更新test给父组件
emit('update:test','最新数据')
}

这样父组件不需要自定义事件就能接受到最新的test数据。！ 

3.ref（子传父）

 【子组件内】

定义方法或变量，使用defineExpose暴露出去

import {defineExpose} from "vue"

//初始化表单方法
const resetForm = () => {
  formRef.value.resetFields()
}
//暴露方法
defineExpose({resetForm})

【父组件内】

定义ref,绑定给子组件

父组件调用子组件的方法：

4.provide / inject（祖孙、父子组件）

这两个都只能在setup( )中调用

在多级嵌套的组件体系中，某一级的外层组件可以通过provide属性向其下任意的一级子组件提供一个依赖，不管层级有多深；而某一级的子组件则可以通过inject属性接收来自其上任意一级父组件提供的依赖。 注意：provide和inject需要一起使用，通过provide / inject互相传递的值在任意组件修改了，其他组件也同步

举个例子：有三个组件，分别是爷爷，爸爸，孙子。

// 嵌套条件

  
    
  

定义爷爷组件

定义爸爸、孙子组件（写法都一样）

兄弟组件

1.mitt

vue到3.0之后好像取消了bus全局事件总线，选择使用mitt作为兄弟组件间通信和传参的方式。mitt的使用方法有两种：可以单独创建一个文件，哪里要用就引入它；也可以 main.js 中挂载全局属性；

使用mitt，首先要安装mitt库

npm i mitt

使用方法1：单文件方法

在单独的文件中暴露出事件总线对象

import mitt from "mitt"
const Mit = mitt()

// 由于必须要拓展ComponentCustomProperties类型才能获得类型提示
declare module "vue" {
    export interface ComponentCustomProperties {
        bus: typeof Mit
    }
}
export default Mit

在指定组件中导入并使用它

文件1：


文件2：

使用方法2：全局挂载使用

全局总线，vue 入口文件 main.js 中挂载全局属性

import { createApp } from 'vue'
import App from './App.vue'
import mitt from 'mitt'
 
const Mit = mitt()//创建mitt实例
 
//TypeScript注册
// 由于必须要拓展ComponentCustomProperties类型才能获得类型提示
declare module "vue" {
    export interface ComponentCustomProperties {
        $Bus: typeof Mit
    }
}
 
const app = createApp(App)
 
//  vue3 中使用 app.config.globalProperties，替代了vue2中的Vue.prototype，用于注册能够被应用内所有组件实例访问到的全局属性的对象 
app.config.globalProperties.$Bus = Mit //使用的时候就是xx.$Bus.on或者xx.$Bus.emit
 
app.mount('#app')

3使用方法通过emit派发， on 方法添加事件，off 方法移除，clear 清空所有

A组件派发（emit）

B组件监听（on）

监听所有事件（ on("*") ）

instance?.proxy?.$Bus.on('*',(type,num)=>{
    console.log(type,num,'===========>B')
})

移除监听事件（off）

const Fn = (num: any) => {
    console.log(num, '===========>B')
}
instance?.proxy?.$Bus.on('on-num',Fn)//listen
instance?.proxy?.$Bus.off('on-num',Fn)//unListen

清空所有监听（clear）

instance?.proxy?.$Bus.all.clear() 

原文链接：https://blog.csdn.net/qq1195566313/article/details/125453908