当前位置：首页 > news >正文

Vue3组件通信全攻略：8种传值方式详解

news 来源：原创 2025/5/19 13:51:40

前言

在Vue3开发中，组件通信是构建复杂应用的核心技能。本文将全面讲解Vue3支持的8种组件传值方式，助你轻松应对各种场景！

一、Props父传子

适用场景：父组件向直接子组件传递数据

<!-- 父组件 -->
<template>
  <Child :title="parentTitle" />
</template>

<script setup>
import Child from './Child.vue'
const parentTitle = "来自父组件的消息"
</script>

<!-- 子组件Child.vue -->
<template>
  <h2>{{ title }}</h2>
</template>

<script setup>
// Options API写法
// export default {
//   props: ['title']
// }

// Composition API写法
const props = defineProps({
  title: {
    type: String,
    default: '默认标题'
  }
})
</script>

二、自定义事件子传父

适用场景：子组件向父组件传递数据

<!-- 子组件 -->
<template>
  <button @click="sendMessage">发送消息</button>
</template>

<script setup>
const emit = defineEmits(['message-sent'])

const sendMessage = () => {
  emit('message-sent', '子组件的数据')
}
</script>

<!-- 父组件 -->
<template>
  <Child @message-sent="handleMessage" />
</template>

<script setup>
const handleMessage = (msg) => {
  console.log(msg) // 输出：子组件的数据
}
</script>

三、v-model双向绑定

Vue3新特性：支持多个v-model绑定

<!-- 父组件 -->
<template>
  <Child v-model:title="pageTitle" v-model:content="pageContent" />
</template>

<!-- 子组件 -->
<template>
  <input 
    :value="title"
    @input="$emit('update:title', $event.target.value)"
  >
  <textarea
    :value="content"
    @input="$emit('update:content', $event.target.value)"
  >
</template>

<script setup>
defineProps(['title', 'content'])
defineEmits(['update:title', 'update:content'])
</script>

四、Ref获取组件实例

适用场景：父组件直接调用子组件方法

<!-- 父组件 -->
<template>
  <Child ref="childRef" />
  <button @click="callChildMethod">调用子组件</button>
</template>

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

const callChildMethod = () => {
  childRef.value.childMethod()
}
</script>

<!-- 子组件 -->
<script setup>
const childMethod = () => {
  console.log('子组件方法被调用')
}

// 需暴露方法给父组件
defineExpose({
  childMethod
})
</script>

五、Provide/Inject依赖注入

适用场景：跨层级组件通信

<!-- 祖先组件 -->
<script setup>
import { provide } from 'vue'

provide('globalColor', 'red')
</script>

<!-- 任意后代组件 -->
<script setup>
import { inject } from 'vue'

const color = inject('globalColor', 'blue') // 默认值blue
</script>

六、事件总线（Event Bus）

Vue3实现方式：需借助第三方库（推荐mitt）

// eventBus.js
import mitt from 'mitt'
export const emitter = mitt()

// 组件A发送事件
emitter.emit('custom-event', data)

// 组件B监听事件
emitter.on('custom-event', (data) => {
  // 处理数据
})

七、Pinia状态管理

推荐方案：Vue官方新一代状态管理工具

// store/counter.js
export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++
    }
  }
})

// 组件中使用
import { useCounterStore } from './store/counter'
const counter = useCounterStore()
console.log(counter.count) // 0
counter.increment()

八、LocalStorage/SessionStorage

适用场景：持久化数据存储

// 存储
localStorage.setItem('user', JSON.stringify(userData))

// 读取
const user = JSON.parse(localStorage.getItem('user'))

方法对比

方式	适用场景	数据流向	复杂度
Props	父子组件	父→子	★☆☆
自定义事件	父子组件	子→父	★☆☆
v-model	父子双向绑定	双向	★★☆
Provide/Inject	跨层级组件	祖先→后代	★★☆
Pinia	复杂应用/多组件共享状态	任意方向	★★★
事件总线	任意组件（简单场景）	任意方向	★★☆