Vue 父子組件互相通信

爲了保證單項數據流，在 Vue 中，父子組件的關係可以總結爲 props 向下傳遞，事件向上傳遞。

即父組件通過 props 給子組件下發數據，子組件通過事件的方式給父組件發送信息。

一，父傳子

1，父組件傳值給子組件

在父組件中，用 v-bind 動態綁定一個自定義屬性，用於給子組件傳遞數據

<template>
  <div class="parent">
    <child :msg="msg"></child>
  </div>
</template>

<script>
import { child } from "./child";
export default {
  components: { child },
  data() {
    return {
      msg: 2333
    };
  }
};
</script>

2，子組件接收父組件傳過來的數據

在子組件中，使用 props 接收父組件穿過來的數據。

注意：這裏 props 中定義的屬性要和父組件中，父組件要給子組件傳遞數據的那個自定義屬性匹配；

<template>
  <div class="child">{{ msg }}</div>
</template>

<script>
export default {
  props: ["msg"]
};
</script>

二，子傳父

1，子組件給父組件傳值

子組件通過事件的方式，利用 $emit 給父組件傳值。

注意：$emit 的第一個參數是一個自定義事件的方法名，後邊的 “2333” 是子組件要給父組件傳遞的數據；

<template>
  <div class="child">
    <button @click="msg"></button>
  </div>
</template>

<script>
export default {
  methods: {
    msg() {
      this.$emit("the_data", 2333);
    }
  }
};
</script>

2，父組件接收子組件傳遞過來的數據

在父組件的子組件標籤裏，要寫上子組件中的那個自定義的事件用於監聽子組件接收數據；

<template>
  <div class="parent">
    <child @the_data="getData"></child>
  </div>
</template>

<script>
import { child } from "./child";
export default {
  components: { child },
  methods: {
    getData(value) {
      // value 就是子組件傳遞過來的數據
    }
  }
};
</script>

以上，就是父子組件互相通信的全部內容了。

如果兩個組件之間沒有父子關係還是想要通信怎麼辦呢？

請看我的下篇博客《Vue事件總線 eventBus》🌸✨🌼🌻🌺