Vue.js 是一個廣受歡迎的 JavaScript 框架，它可以讓開發者快速開發出高品質的 Web 應用程式。Vue.js 的組件化架構可以讓開發者更容易地將應用程式分割成可重用的組件，並且可以讓父子組件之間進行通信。在本文中，我們將討論 Vue.js 組件的父子組件通信，並提供一些程式範例來說明如何實現它。
Vue.js 組件的父子組件通信
Vue.js 的組件化架構可以讓開發者將應用程式分割成可重用的組件，並且可以讓父子組件之間進行通信。父子組件之間的通信可以通過 props 和 events 來實現，props 可以用於從父組件傳遞資料到子組件，而 events 則可以用於從子組件傳遞資料到父組件。
Props
Props 是一種從父組件傳遞資料到子組件的方法，它可以讓開發者將資料傳遞到子組件，並且可以在子組件中使用它們。例如，假設我們有一個名為 ParentComponent 的父組件，它有一個名為 message 的 prop，並且有一個名為 ChildComponent 的子組件，我們可以將 message prop 傳遞到 ChildComponent：
<template>
<div>
<ChildComponent :message="message" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
message: 'Hello World!'
};
}
};
</script>
在 ChildComponent 中，我們可以使用 message prop：
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
props: {
message: String
}
};
</script>
Events
Events 是一種從子組件傳遞資料到父組件的方法，它可以讓開發者將資料從子組件傳遞到父組件，並且可以在父組件中使用它們。例如，假設我們有一個名為 ChildComponent 的子組件，它有一個名為 message 的 prop，並且有一個名為 sendMessage 的自定義事件，我們可以將 message prop 傳遞到 ChildComponent，並且在 ChildComponent 中觸發 sendMessage 事件：
<template>
<div>
<ChildComponent :message="message" @sendMessage="handleSendMessage" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
message: 'Hello World!'
};
},
methods: {
handleSendMessage(message) {
// Do something with the message
}
}
};
</script>
在 ChildComponent 中，我們可以使用 message prop 並觸發 sendMessage 事件：
<template>
<div>
<button @click="handleClick">Send Message</button>
</div>
</template>
<script>
export default {
props: {
message: String
},
methods: {
handleClick() {
this.$emit('sendMessage', this.message);
}
}
};
</script>
總結
Vue.js 的組件化架構可以讓開發者將應用程式分割成可重用的組件，並且可以讓父子組件之間進行通信。父子組件之間的通信可以通過 props 和 events 來實現，props 可以用於從父組件傳遞資料到子組件，而 events 則可以用於從子組件傳遞資料到父組件。
推薦閱讀文章
Vue.js 組件的父子組件通信
Vue.js 組件
如何在Vue.js中的組件之間進行通信
Vue.js 組件通信
如何在Vue.js中的組件之間進行通信</a