vue组件之间是怎么传值的?

在 Vue 中,组件之间的传值(通信)可以通过多种方式实现,具体方式取决于组件之间的关系(父子、兄弟、祖孙等)。以下是常见的几种通信方法:


1. 父组件向子组件传值

父组件通过 props 将数据传递给子组件。

实现步骤
  1. 父组件中通过属性绑定(v-bind:)向子组件传递数据。
  2. 子组件通过 props 接收父组件传递的数据。
代码示例

父组件:

复制代码

vue

<template> <div> <ChildComponent :message="parentMessage" /> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { parentMessage: 'Hello from Parent!' }; } }; </script>

子组件:

复制代码

vue

<template> <div> <p>{``{ message }}</p> </div> </template> <script> export default { props: { message: { type: String, required: true } } }; </script>


2. 子组件向父组件传值

子组件通过 $emit 方法触发自定义事件,将数据传递给父组件。

实现步骤
  1. 子组件使用 this.$emit('事件名', 数据) 触发事件。
  2. 父组件监听该事件,并通过回调函数获取数据。
代码示例

父组件:

复制代码

vue

<template> <div> <ChildComponent @sendMessage="handleMessage" /> <p>Message from Child: {``{ childMessage }}</p> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { childMessage: '' }; }, methods: { handleMessage(msg) { this.childMessage = msg; } } }; </script>

子组件:

复制代码

vue

<template> <div> <button @click="sendToParent">Send to Parent</button> </div> </template> <script> export default { methods: { sendToParent() { this.$emit('sendMessage', 'Hello from Child!'); } } }; </script>


3. 兄弟组件之间传值

兄弟组件之间没有直接的关系,可以通过以下方式实现:

方法 1:使用父组件作为中介
  • 将需要共享的数据提升到父组件,通过父组件向兄弟组件传递数据。
代码示例

父组件:

复制代码

vue

<template> <div> <SiblingOne @sendToSibling="handleSiblingData" /> <SiblingTwo :data="siblingData" /> </div> </template> <script> import SiblingOne from './SiblingOne.vue'; import SiblingTwo from './SiblingTwo.vue'; export default { components: { SiblingOne, SiblingTwo }, data() { return { siblingData: '' }; }, methods: { handleSiblingData(data) { this.siblingData = data; } } }; </script>

兄弟组件之间:

  • SiblingOne 使用 $emit 向父组件传递数据。
  • 父组件再通过 props 将数据传递给 SiblingTwo。

方法 2:使用全局事件总线
  • 创建一个事件总线(Event Bus),用来在组件间通信。
  • Vue 3 推荐使用 Pinia 或 Vuex,而不是事件总线。

Event Bus 示例(Vue 2):

复制代码

javascript

// 创建事件总线 import Vue from 'vue'; export const EventBus = new Vue();

使用 EventBus:

  • 兄弟组件 A 发送数据:
复制代码

javascript

EventBus.$emit('customEvent', 'Hello, Brother!');

  • 兄弟组件 B 接收数据:
复制代码

javascript

EventBus.$on('customEvent', (data) => { console.log(data); // "Hello, Brother!" });


4. 跨层级组件通信(祖孙传值)

方法 1:provideinject
  • provide:在祖组件中提供数据。
  • inject:在任意子孙组件中接收数据。
代码示例

祖组件:

复制代码

vue

<template> <div> <ChildComponent /> </div> </template> <script> export default { provide() { return { sharedData: 'Data from Grandparent' }; } }; </script>

孙组件:

复制代码

vue

<template> <div> <p>{``{ sharedData }}</p> </div> </template> <script> export default { inject: ['sharedData'] }; </script>


方法 2:使用 Vuex 或 Pinia(状态管理)
  • 适合处理复杂场景,多个组件共享状态。

总结

场景 推荐方式
父子组件 props$emit
兄弟组件 父组件中转 / Vuex / Pinia
跨层级组件 provideinject
多组件共享复杂数据 Vuex / Pinia

根据项目需求选择适合的方式即可!

相关推荐
Hexene...7 分钟前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
初遇你时动了情9 分钟前
腾讯地图 vue3 使用 封装 地图组件
javascript·vue.js·腾讯地图
dssxyz13 分钟前
uniapp打包微信小程序主包过大问题_uniapp 微信小程序时主包太大和vendor.js过大
javascript·微信小程序·uni-app
华子w90892585922 分钟前
基于 SpringBoot+VueJS 的农产品研究报告管理系统设计与实现
vue.js·spring boot·后端
天天扭码43 分钟前
《很全面的前端面试题》——HTML篇
前端·面试·html
xw544 分钟前
我犯了错,我于是为我的uni-app项目引入环境标志
前端·uni-app
!win !1 小时前
被老板怼后,我为uni-app项目引入环境标志
前端·小程序·uni-app
Burt1 小时前
tsdown vs tsup, 豆包回答一坨屎,还是google AI厉害
前端
群联云防护小杜2 小时前
构建分布式高防架构实现业务零中断
前端·网络·分布式·tcp/ip·安全·游戏·架构
ohMyGod_1233 小时前
React16,17,18,19新特性更新对比
前端·javascript·react.js