在 Vue 中，元件是建立使用者介面的重要部分，它們可以方便的將介面分解為更小而可重複使用的部分。由於一個頁面可能包含多個元件，所以元件之間的通訊變得很重要。特別是在父組件和子組件之間的通訊。
Vue中透過props和$emit兩種方式實作父子元件之間的通訊。本文將為你介紹這兩種方式。
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是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中文網其他相關文章！
