跳到主要内容

Vue 组件间通信

1. 前言

本小节我们将介绍组件间是如何实现数据通信的。包括父组件向子组件、子组件向父组件、兄弟组件、非关系组件之间的数据通信。组件通信是组件式开发中非常重要的一部分,也是组件式开发中的难点。在学完本小节之后,同学们可以通过反复地编写组件来加深印象。

2. 慕课解释

组件是 vue 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用。我们需要使用特定的方式来实现组件间的数据通信,接下来让我们一个个介绍这几种类别的组件通信是如何实现的。

3. 父组件通过 props 传递数据给子组件

父组件通过 props 属性向子组件传递数据。子组件利用组件实例的 props 属性定义组件需要接收的参数,在使用组件时通过 attribute的方式传入参数,如:

// 在子组件内定义组件接收一个参数 name
{
props: ['name']
}
// 父组件使用组件时传递参数 name
<child :name="name"></child>

接下来我们看一个具体示例: