Vue3 组件通信方式全解析

vue3通信方式:父子、同级、多级。

父子

父传子

父向子传数据:

html 复制代码
<!-- 父组件 -->
<template>
  <ChildComponent :message="parentMessage" />
</template>

<script setup>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'

const parentMessage = ref('Hello from parent')
</script>
html 复制代码
<!-- 子组件 ChildComponent.vue -->
<template>
  <div>{{ message }}</div>
</template>

<script setup>
defineProps({
  message: String
})
</script>

子传父

子组件通过 $emit 触发事件向父组件传递数据:

html 复制代码
<!-- 子组件 -->
<template>
  <button @click="sendMessage">Send to Parent</button>
</template>

<script setup>
const emit = defineEmits(['messageSent'])

function sendMessage() {
  emit('messageSent', 'Hello from child')
}
</script>
html 复制代码
<!-- 父组件 -->
<template>
  <ChildComponent @message-sent="handleMessage" />
</template>

<script setup>
function handleMessage(msg) {
  console.log(msg) // "Hello from child"
}
</script>

父子双向 v-model

html 复制代码
<!-- 父组件 -->
<template>
  <ChildComponent v-model="message" />
</template>

<script setup>
import { ref } from 'vue'
const message = ref('')
</script>
html 复制代码
<!-- 子组件 -->
<template>
  <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)">
</template>

<script setup>
defineProps(['modelValue'])
defineEmits(['update:modelValue'])
</script>

同级

通过同一个爸来传

html 复制代码
<!-- 父组件 -->
<template>
  <ComponentA @event="handleEvent" />
  <ComponentB :data="sharedData" />
</template>

<script setup>
import { ref } from 'vue'
const sharedData = ref(null)

function handleEvent(data) {
  sharedData.value = data
}
</script>

全局事件 event bus

html 复制代码
// eventBus.js
import { createApp } from 'vue'
export const eventBus = createApp({})

// 组件A (发送事件)
import { eventBus } from './eventBus'
eventBus.config.globalProperties.$emit('event-name', data)

// 组件B (接收事件)
import { eventBus } from './eventBus'
eventBus.config.globalProperties.$on('event-name', (data) => {
  // 处理数据
})

vuex / pinia 状态管理库

这个比较适合用复杂的组件通信:

html 复制代码
// 使用Pinia示例
// store/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++
    }
  }
})
html 复制代码
// 在任何组件中使用
import { useCounterStore } from '@/stores/counter'
const counter = useCounterStore()
counter.increment()

多级

provide/inject

深层嵌套组件:

html 复制代码
<!-- 祖先组件 -->
<script setup>
import { provide, ref } from 'vue'

const theme = ref('dark')
provide('theme', theme)
</script>
html 复制代码
<!-- 任意后代组件 -->
<script setup>
import { inject } from 'vue'

const theme = inject('theme')
</script>

vuex / pinia 状态管理库

html 复制代码
// 使用Pinia
// store/user.js
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({ name: '', age: 0 }),
  getters: {
    isAdult: (state) => state.age >= 18
  },
  actions: {
    updateName(newName) {
      this.name = newName
    }
  }
})
html 复制代码
// 在任何层级的组件中
import { useUserStore } from '@/stores/user'
const userStore = useUserStore()
userStore.updateName('John')

mitt 库

html 复制代码
// eventBus.js
import mitt from 'mitt'
export const emitter = mitt()
html 复制代码
// 组件A (发送)
import { emitter } from './eventBus'
emitter.emit('event', data)
html 复制代码
// 组件B (接收)
import { emitter } from './eventBus'
emitter.on('event', (data) => {
  // 处理数据
})

总结

vue3通信方式:

父子:1、prop 父传子 defineProps;2、 defineEmits 子传父;3、父子 双向 v-model ---> defineProps(['modelValue']) | defineEmits(['update:modelValue'])

同级:1、通过一个爸;2、用event bus:eventBus.config.globalProperties. <math xmlns="http://www.w3.org/1998/Math/MathML"> e m i t 、 e v e n t B u s . c o n f i g . g l o b a l P r o p e r t i e s . emit、eventBus.config.globalProperties. </math>emit、eventBus.config.globalProperties.on;3、用状态库 vuex或者 pinia

多级:1、provide/inject 多级传;2、用状态库 vuex或者 pinia;3、用库 mitt。

只看现在莫回头

相关推荐
一城烟雨_23 分钟前
vue3 实现将html内容导出为图片、pdf和word
前端·javascript·vue.js·pdf
树懒的梦想1 小时前
调整vscode的插件安装位置
前端·cursor
低代码布道师2 小时前
第二部分:网页的妆容 —— CSS(下)
前端·css
一纸忘忧2 小时前
成立一周年!开源的本土化中文文档知识库
前端·javascript·github
涵信3 小时前
第九节:性能优化高频题-首屏加载优化策略
前端·vue.js·性能优化
前端小巷子3 小时前
CSS单位完全指南
前端·css
SunTecTec4 小时前
Flink Docker Application Mode 命令解析 - 修改命令以启用 Web UI
大数据·前端·docker·flink
拉不动的猪5 小时前
前端常见数组分析
前端·javascript·面试
小吕学编程5 小时前
ES练习册
java·前端·elasticsearch
Asthenia04125 小时前
Netty编解码器详解与实战
前端