Vue - 你知道Vue组件之间是如何进行数据传递的吗

难度级别：中级及以上                                 提问概率：85% 

---

这道题还可以理解为Vue组件之间的数据是如何进行共享的，也可以理解为组件之间是如何通信的，很多人叫法不同，但都是说的同一个意思。我们知道，在Vue单页面应用项目中，所有的组件都是被嵌套在App.vue内部的，所以项目中所有的组件都是有“血缘关系”的。只不过有的组件关系比较近，像父子组件和兄弟组件这样的；有的组件内部包含子组件，子组件又嵌套子组件，就像古代皇帝生孩子，孩子又生孩子一样；有的组件之间关系就更加疏远了，要向上追溯很多层才能发现，原来各自的祖先竟然是一对兄弟组件。

尽管组件之间的关系或近或远，尽管每个组件都有各自独有的作用域，但现实开发场景由于业务需要，又不得不进行组件间的数据共享。正因为组件间的数据传递，才使得原本庞大的项目可以更加精细有序的进行组件划分，而丰富多彩的组件组合起来，也使得整个项目更加健壮而又完整。接下来我们看一下，有哪些方式可以实现Vue组件间的数据共享呢？

1 父子组件之间的数据传递

父子组件之间的数据传递方式是最常用也是最简单的，第一种方式是父组件通过属性值的方式传递到子组件，子组件通过props属性接收数据，代码如下

父组件代码：
<template>
  <Child name="张三" />  
</template>
子组件代码：
<template>
  <div>{{ name }}</div>  
</template>
<script>
	export default {
props: {
name: { type: String, default: '',}
},
}
</script>

 第二种是在父组件中为子组件添加ref属性，这样就可以获取到子组件的实例，并调用子组件内部的方法进行传值，代码如下

父组件代码：
<template>
  <Child ref="child" />  
</template>

<script>
export default {
  		mounted() {
    		this.$refs.child.setName('张三');
  		}
}
</script>
子组件代码：
<template>
  <div>{{ name }}</div>  
</template>

<script>
export default {
  		data () {
    		return {
      			name: ''
    		}
  		},
  		methods: {
setName(name) {
this.name = name;
}
  		}
}
</script>

子组件可以通过触发$emit自定义事件的方式，将数据传递给父组件，父组件则需要提前预定义事件做为接收事件，代码如下

子组件代码：
<template>
  <div @click="setNameToParent">子组件向父组件传递数据</div>  
</template>

<script>
export default {
  		methods: {
    		setNameToParent() {
      			this.$emit('getName', '张三')  
    		}
  		}
}
</script>
父组件代码：
<template>
  <Child @getName="getChildName" />  
</template>

<script>
export default {
  		methods: {
    		getChildName(name) {
      			console.log(name); // 张三
    		}
}
}
</script>  

除此之外，子组件还可以通过this.$parent的方式获取父组件实例，这样就可以调用父组件的方法为父组件传值了。

2 兄弟组件之间的数据传递

兄弟组件之间的数据传递相当于父子组件的升级版，第一种方式是以父组件做为媒介，先将数据传递给父组件，触发父组件的内部方法，再将数据主动传递给另外一个子组件的方式；第二种方式是需要创建EventBus，它属于一种中央事件总线，将EventBus绑定到最外层Vue实例的prototype属性上，这样兄弟组件之间的媒介就变为Vue实例了，从而达到数据传递的效果。

3 同祖级组件间的数据穿透传递

假如一个组件内部嵌套了多层子组件，那么再使用父子组件间的传递方式，进行逐层传递的方式就显得效率非常低了，而且也给代码维护带来了极大的不便。这就需要通过祖级组件向所有子组件穿透传递的方式。在祖级组件中定义provide方法，将需要的数据穿透传递，这样无论哪一层级的子组件，都可以通过定义inject属性的方式获取到provide传递过来的值。

一般在面试中，provide/inject穿透传递答到这里就可以了，但需要注意的是，provide/inject并不是响应式的，也就是说祖级组件如果传递的是类似数值、字符串这些基本类型的值，子级组件很可能是监听不到值的变化的；如果祖级组件传递的是对象这种数据类型，它就会变为可监听可响应的。尽管provide/inject功能如此强大，缺点也很明显，那就是一旦祖级组件传递的值改变后，所有子级组件都会相应发生变化，使代码的耦合度变高。

4 远亲组件间的数据跨越传递

如果两个组件关系非常疏远，就不能使用父子组件传递数据的方式，穿透传递也会失效。如果是一些全局需求的数据，可以使用类似cookie、localstorage这样的本地化存储方式，也可以在App.vue外层定义全局变量，这些方式都可以起到全局使用的效果，但这些方式却很难起到数据响应而及时更改的效果。所以这种关系疏远的组件间数据传递更适合使用Vuex的方式。

Vuex中的state用于存放所有共享变量的初始值，通过mutations方法可以修改state变量数据，如果涉及到请求异步接口数据后修改state，就要使用actions方法间接触发mutations方法来修改state变量，最终在业务组件中通过Getter响应式的获取state变量，从而达到组件间的数据传递。

尽管Vuex如此方便，但state存储的始终是临时数据，当页面刷新的时候，Vue实例将会被重新加载，state中的数据将会被重置。所以建议在必要的步骤中，修改state变量的同时，将数据在localStorage中也存储一份。这样当页面刷新的时候，再从localStorage中把数据取出并为state赋值即可。

---

刷题思考

    组件间数据传递在前端面试中考察的频次非常高，如果想在这道题上加分，除了父子组件之间传值之外，其他每一种传值方式都要结合项目场景来回答。比如说到provide/inject和vuex的时候，一定要提前整理自己在项目中是如何使用的，不能只是生硬的回答知识点，这样是没有意义的。

---

类似考点

    结合组件间数据传递的考点，面试官很可能还会问以下这些问题，例如你在哪种场景下会使用EventBus，是如何使用的？例如你是如何判断项目中是否需要使用vuex的？例如你能描述一下vuex的工作原理吗？