Vue 中如何實作父子元件之間的通訊？

在 Vue 中，元件是建立使用者介面的重要部分，它們可以方便的將介面分解為更小而可重複使用的部分。由於一個頁面可能包含多個元件，所以元件之間的通訊變得很重要。特別是在父組件和子組件之間的通訊。

Vue中透過props和$emit兩種方式實作父子元件之間的通訊。本文將為你介紹這兩種方式。

一、props

props是Vue中父元件傳遞資料給子元件的方式。 props是一個數組，在數組中儲存了要傳遞給子組件的資料屬性。在子元件中，使用props接收從父元件傳遞來的資料。

props的使用：首先，在父元件中定義props，程式碼如下：

<template>
  <child :message="parentMsg"/>
</template>

<script>
import Child from "./Child.vue";
export default {
  data() {
    return {
      parentMsg: "父组件的数据",
    };
  },
  components: {
    Child,
  },
  props: ["parentMsg"], //在父组件中定义props
};
</script>

在上面的程式碼中，父元件透過props的方式向子組成傳遞了一個名為message的屬性。

然後，在子元件中接收props：

<template>
  <h2>{{ message }}</h2>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true, //props接收的属性必须有值
    },
  },
};
</script>

子元件中，透過props接收了父元件傳遞過來的message屬性。

這時，在父元件的頁面會顯示出「父元件的資料」這個值。

二、$emit

$emit是Vue中子元件傳遞訊息給父元件的方式。當子元件發生某些事件時，可以透過$emit來觸發父元件的事件方法。 $emit方法的第一個參數是要觸發的事件名稱，第二個參數是要傳遞給父元件的參數。

$emit的使用：首先，在子元件中，定義一個事件方法，當某個事件觸發時，呼叫$emit方法將訊息傳遞給父元件，程式碼如下：

<template>
  <button @click="onClick">点击传递消息到父组件</button>
</template>

<script>
export default {
  methods: {
    onClick() {
      this.$emit("child-msg", "子组件的数据");
    },
  },
};
</script>

在上面的程式碼中，子元件定義了onClick事件方法，當按鈕點擊時，會透過$emit方法觸發名稱為child-msg的事件，並傳遞「子元件的資料」這個參數。

然後，在父元件中監聽這個事件：

<template>
  <div>
    <div>{{ message }}</div>
    <child @child-msg="getChildMsg"></child>
  </div>
</template>

<script>
import Child from "./Child.vue";
export default {
  data() {
    return {
      message: "",
    };
  },
  components: {
    Child,
  },
  methods: {
    getChildMsg(msg) {
      this.message = msg; //监听子组件的事件，获取传递过来的参数
    },
  },
};
</script>

在上面的程式碼中，父元件使用@符號來監聽子元件的事件。一旦子元件觸發了child-msg事件，父元件回應事件，並透過getChildMsg方法接收子元件傳遞過來的數據，然後將數據顯示在頁面上。

透過上面兩種方式，就可以在Vue中實作父子元件之間的通訊。程式碼簡潔易懂，易於維護，可提高組件化開發的效率。

以上是Vue 中如何實作父子元件之間的通訊？的詳細內容。更多資訊請關注PHP中文網其他相關文章！