vue中传递数据的方法

一、父子组件通信

1. props（父 → 子）

• 父组件通过属性绑定向子组件传递数据。
• 子组件需在 props 选项中声明接收的属性。

2. $emit（子 → 父）

• 子组件通过触发自定义事件向父组件传递数据。
• 父组件监听事件并处理数据。

二、兄弟组件通信

1. 事件总线（Event Bus）

• 创建全局事件总线实例，用于非父子组件间的通信。

三、跨层级组件通信

1. Provide/Inject

• 祖先组件通过 provide 提供数据，后代组件通过 inject 接收数据。
• 特点：数据单向流动（祖先 → 后代），无需逐级传递。

2. Vuex/Pinia（状态管理库）

• 集中管理应用的共享状态，适合复杂大型应用。

四、其他方式

1. $parent / $children / $refs

• $parent：访问父组件实例（不推荐大量使用，耦合性高）。
• $children：访问子组件实例数组（顺序不固定）。
• $refs：通过 ref 属性访问特定子组件实例。