Vue组件通信-上篇

前言

组件是 vue.js 最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。本文会介绍下Vue组件通信的几种方式，这几种方式也是在开发项目中最常用的方法，接下来我们赶紧来学习下吧~

props

父组件向子组件传值

下面通过一个例子说明父组件如何向子组件传递数据：在子组件 SonPage.vue 中如何获取父组件 FatherPage.vue 中的数据 itemList: ['mike','tom','jordan']

子组件代码:

父组件代码:

prop只能从上层组件传递到下层组件（父子组件），即所谓的单向数据流。prop只读，不能修改，所有修改都将无效并发出警告。

emit

子组件向父组件传值

emit 绑定一个自定义事件, 当这个语句被执行时, 就会将参数 arg 传递给父组件,父组件通过 v-on 监听并接收参数。

父组件代码:

首先需要在父组件中需要暴露一个方法oneEmitIndex，这个方法可以供给子组件调用。并且在父组件使用子组件申明oneEmitIndex方法接受参数。

然后在子组件点击按钮的时候触发事件,使用emit绑定一个oneEmitIndex事件并且传递参数值。

最后，达到的效果是在子组件点击按钮后，把按钮的索引传递给父组件展示。

ref / refs

在子组件上，引用就指向组件实例，可以通过实例直接调用组件的方法或访问数据，我们看一个 ref 来访问组件的例子:

子组件代码:

子组件提供了一个getList方法，弹出alert("子组件的getList方法")。

父组件代码:

首先父组件中使用子组件需要声明ref="sonPage"，点击button调用getSonList方法，使用this.$refs.sonPage的实例直接调用子组件getList方法。

如下图就是在父组件弹出alert的效果。

parent / children

父组件代码:

parent是Vue实例，指定已创建的实例之父实例，在两者之间建立父子关系。

子组件代码:

子实例可以用this.parent访问父实例，子实例被推入父实例的children数组中。

通过 parent/children就可以访问组件的实例，代表可以访问此组件的所有方法和data。

$children是一个数组，是直接儿子的集合，关于具体是第几个儿子，那么儿子里面有个 _uid属性，可以知道他是第几个元素，是元素的唯一标识符，根据这个属性。

provide / inject

简单的来说就是在父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量。

父组件代码:

子组件代码:

需要注意的是这里不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据。

结语

本文就介绍了Vue组件通信最基础和最常用的几种方式，对于刚入门学习Vue的同学还是非常实用的，下文会介绍Vue中高阶的组件通信方法，希望大家能持续关注~