面试官：Vue 中父子组件通信有哪些方式？
自己先想一分钟。
无可否认，现在无论大厂还是小厂都已经用上了Vue.js 框架，简单易上手不说，教程详尽，社区活跃，第三方套件还多。真的是前端开发人员必备技能。而且在面试当中也往往会问到关于 Vue 方面的各种问题，其中大部分面试官会问到如上这种问题。
最近一直在做 Vue项目代码层面上的优化，说实话，优化别人的代码真是件痛苦的事情，功能实现尚且不说，就说代码规范我就能再写出一篇文章来。真的是无规范不成方圆，规范这个东西太重要了！有点扯了，回到主题，咳咳，那就谈谈我对上面的面试题的理解吧，文笔有限，不妥之处，欢迎在文章结尾留言斧正啊，正啊，啊！
概述
几种通信方式无外乎以下几种：
Prop （常用）
$emit (组件封装用的较多)
.sync 语法糖 （较少）
$attrs 和 $listeners (组件封装用的较多)
provide 和 inject （高阶组件/组件库用的较多）
其他方式通信
详述
下面逐个介绍，大神请绕行。
1. Prop
英式发音：[prɒp]。这个在我们日常开发当中用到的非常多。简单来说， 我们可以通过Prop 向子组件传递数据 。用一个形象的比喻来说，父子组件之间的数据传递相当于自上而下的下水管子，只能从上往下流，不能逆流。这也正是 Vue 的设计理念之单向数据流。而 Prop 正是管道与管道之间的一个衔接口，这样水（数据）才能往下流。说这么多，看代码：
<div> <child :content="message"></child> </div> // Js let 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> <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（监听）了这个事件及其监听回调。其实相当于下面这种写法：
vm.$on('greet', function sayHi (val) { console.log('Hi, ' + val) }) vm.$emit('greet', 'vue.js') // => "Hi, vue.js"
3. .sync 修饰符
这个家伙在 vue@1.x 的时候曾作为双向绑定功能存在，即子组件可以修改父组件中的值。因为它违反了单向数据流的设计理念，所以在 vue@2.0 的时候被干掉了。但是在 vue@2.3.0+ 以上版本又重新引入了这个.sync 修饰符。但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。说白了就是让我们手动进行更新父组件中的值了，从而使数据改动来源更加的明显。下面引入自官方的一段话：
在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以修改父组件，且在父组件和子组件都没有明显的改动来源。
既然作为一个语法糖，肯定是某种写法的简写形式，哪种写法呢，看代码：
<text-document v-bind:title="doc.title" v-on:update:title="doc.title = $event"> </text-document>
于是我们可以用 .sync 语法糖简写成如下形式：
<text-document v-bind:title.sync="doc.title"></text-document>
废话这么多，如何做到“双向绑定” 呢？让我们进段广告，广告之后更加精彩！ ... 好的，欢迎回来。假如我们想实现这样一个效果：改变子组件文本框中的值同时改变父组件中的值。怎么做？列位不妨先想想。先看段代码：