Vue组件间通信方法大全（适用父子，兄弟，子孙组件传值 六大类）-- 学习笔记

最近在掘金看了一篇
30 道 Vue 面试题，内含详细讲解（涵盖入门到精通，自测 Vue 掌握程度）
然后发现里面只是说了Vue中组件间传值有几种方式并没有相应的示例。不知道你们会不会和笔者一样，还是停留在之前的几种方式（props/ $emit，$emit/$on，vuex）[尴尬]，上面的文章提到了新的方式，笔者整理了一下并给出示例。

1、props（父组件传给子组件）

新建父组件father.vue

注意标记的地方，同时不要忘了引入子组件跟注册子组件哟

新建子组件child.vue

在子组件中使用props接收，就可以拿来使用了。
传递多个，在props添加就行了，使用数组的形式，比如[‘msg’,‘msgd’]这样的形式，当然也要在父组件加多一个:msgd=“msgd”;命名不一定重复，对应就行，个人建议一样好一点。也可以使用对象的形式接收。

props: {
    logo: String,
    own: String,
    name: String,
    state: String,
    remark: String,
  },

2、$emit（子组件传给父组件）

依旧在子组件中，跟上面的代码写在一起了，注意区分

$emit()：第一个参数是触发的方法，第二个参数是要传给父组件的值
父组件以@+$emit里面的方法receive(这里必须子组件名字一样)的形式接收

childmsg就是子组件传过来的值，注意上面handleReceive($event)中的$event,若是写成其他诸如handleReceive(message)之类的传参会报错。

3、EventBus （$emit / $on）（父子，兄弟，隔代组件）

我这里还是拿father跟child两个组件做示例，以下示例对兄弟组件、隔代组件也能成立。
首先先建立一个中间站bus.js(名字随便取)；代码如下

import Vue from 'vue'
export default new Vue()

接着在父组件引入bus.js

在father使用$emit触发传值，在child通过$on接收值（反过来也一样，看你是谁传给谁），接下来是child组件

定义自己组件内的全局变量来接收从father组件传过来的值，效果图如下

4、ref 与 $parent / $children（父子组件）

（1）ref属性本来是vue中用来操作元素的，类似document.getElemnetById，他在这里还有一种用法，就是可以用来传值，看father.vue、child.vue代码


看父组件mounted打印出来的东西this.$refs.child

我们可以看到是一个对象，红色框圈出的就是子组件data里面的属性。
我们在father.vue里就可以通过

this.$refs.child.msg
this.$refs.child.childmsg

取到子组件的值。

（2）在child.vue打印this.$parent

可以看到也是一个对象，我们一样能通过

this.$parent.fathermsg

取到值

在父组件中打印出this.$children,注意这是一个数组对象了

取值

 this.$children[0].childmsg
 this.$children[0].msg

$parent / $children使用条件比较苛刻，如果是在好几个父组件或者好几个子组件中使用，可能取不到对应的值。

5、$attrs/$listeners（隔代）

（1）$attrs
father.vue

child.vue

在子组件中只接收了父组件传过来的bar值
this.$attrs可以打印出
父作用域中不被 prop 所识别 (且获取) 的特性绑定 ( class 和 style 除外 )。就是说只要在子组件中没有给prop特性绑定的都能够通过$attrs获取

（2）$listeners
vue文档是这样说的：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。
大致意思就是说使用v-on绑定一个事件时，不加.native修饰符的话，父组件可以通过子组件绑定v-on="$listeners"，然后将孙组件的值传给父组件。（如果理解有误希望大佬可以纠正）

示例：通过child.vue绑定v-on="$listeners"，然后让grandson.vue传值给father.vue。father.vue监听grandson触发的事件

child.vue 绑定v-on="$listeners"

grandson.vue触发，注意这里click事件未加修饰符.native（即非@click.native=""）

father.vue监听



现在可以看到把值传过来了，控制台也能打印出来。

**–如果在grandson click事件中添加修饰符.native变成
@click.native=""handleListener，则无法传值。

6、vuex

Vuex 5分钟带你入门