Vue3 组件通信、组件间传值的几种方式(分享)

1. 父子之间传值

后面的列子都是使用 setup 语法糖的写法

1.1 defineProps 父传子

define 开头的都是使用的宏编译，不需要导入

// 父组件
<Child msg='我是要传递的数据'/>

// 子组件
const props = defineProps({
  msg: string
})

consolg.log(props.msg.value) // 我是要传递的数据

1.2 defineEmits 子传父

// 子组件
const emits = defineEmits(["customEvent"])

emits("customEvent", "我是要传递的数据")

// 父组件
<Child @customEvent=fn/>

function fn(e) {
  console.log(e) // 我是要传递的数据
}

1.3 defineExpose 子组件暴露数据

// 子组件
defineExpose({
  msg: "我是要暴露的数据"
})

// 父组件
<Child  ref="childEl"/>

import { ref, onMounted } from "vue"

const childEl = ref()

// 这种需要组件实例创建好之后才可以获取
onMounted(() => {
  console.log(childEl.value.msg) // 我是要暴露的数据
})

2. 兄弟之间传值

2.1 mitt

// mitt 文件，因为每次导入后创建都是一个新的 mitt，导致存储的事件丢失，所以需要先进行处理一下
import mitt from 'mitt'
export default mitt()

// 兄弟A
import emitter from "mitt.js"

// 执行事件
emitter.emit("customEvent", "数据")

// 兄弟B
import emitter from "mitt.js"

function fn(e) {
  console.log(e) // 数据
}

// 添加事件
emitter.on("customEvent", fn)

// 卸载事件
emitter.off("customEvent", fn)

// 清空事件
emitter.all.clear()

3. 祖孙之间传值

3.1 provide 与 inject

// 祖先组件
import { ref, provide } from "vue"

const color = ref("red")

provide("proColor", color)

// 后代组件，后代组件可以修改祖先组件传过来的数据，也是具有响应式的（双向数据流）
import { inject } form "vue"

// 方式一
const color1 = inject("color")
// 方式二
const color2 = inject("color", "red") // 带有默认值