Vue组件间通信有哪些全面的方法和技巧？

本文共计3179个文字，预计阅读时间需要13分钟。

目录+前言+组件介绍+一、父传子+1. 父组件通过props传递数据给子组件+2. 定义props的类型和默认值+二、子传父+子组件通过$emit传递数据给父组件+三、非父子组件间数据传递+1. 通过公共的事件总线传递数据

目录

• 前言
• 组件介绍
• 一、父传子
• 1. 父组件通过 props 传递数据给子组件
• 2. 定义props的类型和默认值
• 二、子传父
• 子组件通过 $emit 传递数据给父组件
• 三、非父子组件间数据传递
• 1.通过公有的父组件进行非父子组件间的通信
• 2. 通过使用一个空的 Vue 实例作为中央事件总线
• 小结

前言

本章我们将介绍组件间是如何实现数据通信的。包括父组件向子组件、子组件向父组件、兄弟组件、非关系组件之间的数据通信。

组件通信是组件式开发中非常重要的一部分，也是组件式开发中的难点。

组件介绍

组件是 vue 最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。

我们需要使用特定的方式来实现组件间的数据通信，接下来让我们一个个介绍这几种类别的组件通信是如何实现的。