文章目录
前言
在 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) // 输出: "来自子组件的问候"
}