Vue 的單文件組件在使用 Vue 時非常常用，所以我們也會經常遇到組件之間需要傳遞數據的時候，大致分為三種情況：

父組件向子組件傳遞數據，通過 props 傳遞數據。 子組件向父組件傳遞數據，通過 events 傳遞數據。 兩個同級組件之間傳遞數據，通過 event bus 傳遞數據。

文檔中也已經詳細的說明了各種情況下的解決方法，但是現在我在還沒有閱讀多少文檔的情況下，沒有找到有單文件組件方面的具體書寫方式，智商和理解能力有限的情況下，自己嘗試了一下，最后發現其實是一樣的。所以這篇文章其實是廢話，但是還是想記錄一下，不枉自己花了一個多小時。

準備工作，我新建了 6 個文件，分別是：

index.html main.js 「Vue 實例」 app.vue 「根組件，包含 page 和 footer 組件」 page.vue 「msg 的父組件，footer 的 同級組件」 msg.vue footer.vue

父組件向子組件傳遞數據，通過 props 傳遞數據。

這里我以 page 向 msg 傳遞數據為例：page.vue 中

<template>  <div class="page">    page    <msg :love="message"></msg>  </div></template><script>import msg from './msg.vue'export default { name: 'page', components: { msg }, data () {  return {   message: 'page-msg'  } }}</script>

msg.vue 中

<template>  <div class="msg">    {{ love }} </div></template><script>export default { name: 'msg', props: ['love']}</script>

這樣以后就會發現，實現了把父組件 page 中的數據傳遞到子組件 msg 中了。

另外，需要強調一下的是，不要在子組件中修改 props 的值，當然修改是有效的，非常不推薦，而且 Vue 也會有警告提示。正確的做法是傳遞給 data 中的屬性或者計算屬性。props 中的值是可以通過 this.love 訪問到的。

特別注意 props 值是引用類型時的情況，不可以進行簡單的賦值，會影響到父組件，正確的做法是進行深拷貝。

子組件向父組件傳遞數據，通過 events 傳遞數據。

父組件 page.vue 中

<template>  <div class="page">    page    <msg @passData="getData"></msg>  </div></template><script>import msg from './msg.vue'export default { name: 'page', components: { msg }, data () {  return {   message: 'hi'  } }, methods: {  getData (data) {   console.log(data)  } }}</script>

子組件 msg.vue 中

<template>  <div class="msg">  {{ msg }}  <button @click="pass">點擊</button> </div></template><script>export default { name: 'msg', data () {   return {     msg: 'hello'   } }, methods: {   pass () {   this.$emit('passData', 'success')  } }}</script>