Vue 3组件通信13种方法

---

前言

在 Vue 3 中,组件之间的通信是构建应用程序的关键。本指南将介绍 13 种不同的组件通信方法,从最简单到最复杂,帮助你选择最适合你需求的方式。

---

1. 父组件向子组件传递数据 (Props)

这是最基本也是最常用的通信方式。父组件通过属性向子组件传递数据。

父组件:

<template>
  <child :name="name"></child>
</template>

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

const name = ref('小明')
</script>

子组件:

<template>
  <div>{
   {
    props.name }}</div>
</template>

<script setup>
import {
    defineProps } from 'vue'

const props = defineProps({
   
  name: {
   
    type: String,
    default: '',
  },
})
</script>

2. 子组件向父组件传递数据 (Emit)

子组件可以通过触发事件的方式向父组件传递数据。

子组件:

<template>
  <button @click="handleClick">点击我</button>
</template>

<script setup>
import {
    ref, defineEmits } from 'vue'

const message = ref('来自子组件的问候')
const emits = defineEmits(['greet'])

const handleClick = () => {
   
  emits('greet', message.value)
}
</script>

父组件:

<template>
  <child @greet="handleGreet"></child>
</template>

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

const handleGreet = (message) => {
   
  console.log(message) // 输出: "来自子组件的问候"
}