Vue.js 父子组件通信的十种方式

面试官：Vue 中父子组件通信有哪些方式？

自己先想一分钟。

无可否认，现在无论大厂还是小厂都已经用上了Vue.js 框架，简单易上手不说，教程详尽，社区活跃，第三方套件还多。真的是前端开发人员必备技能。而且在面试当中也往往会问到关于 Vue 方面的各种问题，其中大部分面试官会问到如上这种问题。

最近一直在做 Vue项目代码层面上的优化，说实话，优化别人的代码真是件痛苦的事情，功能实现尚且不说，就说代码规范我就能再写出一篇文章来。真的是无规范不成方圆，规范这个东西太重要了！有点扯了，回到主题，咳咳，那就谈谈我对上面的面试题的理解吧，文笔有限，不妥之处，欢迎在文章结尾留言斧正啊，正啊，啊！

概述

几种通信方式无外乎以下几种：

详述

下面逐个介绍，大神请绕行。

1. Prop

英式发音：[prɒp]。这个在我们日常开发当中用到的非常多。简单来说， 我们可以通过Prop 向子组件传递数据 。用一个形象的比喻来说，父子组件之间的数据传递相当于自上而下的下水管子，只能从上往下流，不能逆流。这也正是 Vue 的设计理念之单向数据流。而 Prop 正是管道与管道之间的一个衔接口，这样水（数据）才能往下流。说这么多，看代码：

<div id="app"> <child :content="message"></child></div>// Jslet Child = Vue.extend({ template: '<h2>{{ content }}</h2>', props: {  content: {   type: String,   default: () => { return 'from child' }  } }})new Vue({ el: '#app', data: {  message: 'from parent' }, components: {  Child }})

你可以狠狠的戳这里查看Demo！浏览器输出：

from parent

2. $emit

英式发音：[iˈmɪt]。官方说法是 触发当前实例上的事件。附加参数都会传给监听器回调 。按照我的理解不知道能不能给大家说明白，先简单看下代码吧：

<div id="app"> <my-button @greet="sayHi"></my-button></div>let MyButton = Vue.extend({ template: '<button @click="triggerClick">click</button>', data () {  return {   greeting: 'vue.js!'  } }, methods: {  triggerClick () {   this.$emit('greet', this.greeting)  } }})new Vue({ el: '#app', components: {  MyButton }, methods: {  sayHi (val) {   alert('Hi, ' + val) // 'Hi, vue.js!'  } }})

你可以狠狠的戳这里查看Demo! 大致逻辑是酱婶儿的：当我在页面上点击按钮时，触发了组件 MyButton 上的监听事件 greet ，并且把参数传给了回调函数 sayHi 。说白了，当我们从子组件Emit（派发） 一个事件之前，其内部都提前在事件队列中On（监听）了这个事件及其监听回调。其实相当于下面这种写法：