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

自己先想一分鐘。

無可否認，現(xiàn)在無論大廠還是小廠都已經用上了Vue.js 框架，簡單易上手不說，教程詳盡，社區(qū)活躍，第三方套件還多。真的是前端開發(fā)人員必備技能。而且在面試當中也往往會問到關于 Vue 方面的各種問題，其中大部分面試官會問到如上這種問題。

最近一直在做 Vue項目代碼層面上的優(yōu)化，說實話，優(yōu)化別人的代碼真是件痛苦的事情，功能實現(xiàn)尚且不說，就說代碼規(guī)范我就能再寫出一篇文章來。真的是無規(guī)范不成方圓，規(guī)范這個東西太重要了！有點扯了，回到主題，咳咳，那就談談我對上面的面試題的理解吧，文筆有限，不妥之處，歡迎在文章結尾留言斧正啊，正啊，啊！

概述

幾種通信方式無外乎以下幾種：

詳述

下面逐個介紹，大神請繞行。

1. Prop

英式發(fā)音：[prɒp]。這個在我們日常開發(fā)當中用到的非常多。簡單來說， 我們可以通過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

英式發(fā)音：[iˈmɪt]。官方說法是 觸發(fā)當前實例上的事件。附加參數都會傳給監(jiān)聽器回調 。按照我的理解不知道能不能給大家說明白，先簡單看下代碼吧：

<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! 大致邏輯是醬嬸兒的：當我在頁面上點擊按鈕時，觸發(fā)了組件 MyButton 上的監(jiān)聽事件 greet ，并且把參數傳給了回調函數 sayHi 。說白了，當我們從子組件Emit（派發(fā)） 一個事件之前，其內部都提前在事件隊列中On（監(jiān)聽）了這個事件及其監(jiān)聽回調。其實相當于下面這種寫法：