vue2.0的三种常用的传值方式，并且如何实现？

最新推荐文章于 2025-07-07 17:18:17 发布

原创最新推荐文章于 2025-07-07 17:18:17 发布 · 410 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了Vue.js中不同组件间的通信方式，包括父组件向子组件传递数据的方法、子组件向父组件发送数据的过程以及非父子关系组件间的通信策略。非父子组件通信涉及使用中间容器、事件总线及Vuex的状态管理模式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

父传子：首先在父组件里面定义一个属性，然后子组件通过‘props’这个关键字来接收。
子传父：子组件要先绑定一个事件，通过‘ $emit’这个关键字来发送数据，最后父组件通过‘$ on’来接收数据。
非父子：
1.他们之间有一个共同的容器，假设A和B之间传值，我们可以用localstoage和SessionStorage把A的数据传给共同的容器，然后B从这个容器中再把A的数据取出来。
2.可以先定义一个bus的空对象，首先A通过‘ $emit’发送数据到bus这个空对象中，然后B通过‘$ on’来接收这个空对象的数据。
3.vuex集中管理的方式传值也是和上面一样的办法，只是在数据较多且复杂的情况下才用，具体操作都是通过一个中间人来传递数据。