Vue 3是目前前端開發中非常熱門的框架之一，它能幫助我們輕松地構建交互式前端應用。在實際的開發中，我們常常需要使用組件交互來實現一些復雜的功能，本文將舉例說明如何使用Vue 3來進行組件交互。

首先，我們需要定義兩個組件：一個父組件和一個子組件。在父組件中，我們需要通過prop將一個屬性傳遞給子組件。

<template>
<div>
<child-component :message="parentMessage"></child-component>
</div>
</template>
<script>
import ChildComponent from "./ChildComponent.vue";
export default {
name: "ParentComponent",
components: {
ChildComponent,
},
data() {
return {
parentMessage: "Hello from parent component!",
};
},
};
</script>

在子組件中，我們需要使用props選項來接收來自父組件的屬性。然后，我們可以在子組件的模板中使用這個屬性。

<template>
<div>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
name: "ChildComponent",
props: {
message: {
type: String,
required: true,
},
},
};
</script>

通過這種方式，父組件和子組件之間就可以進行交互了。當父組件的數據發生變化時，子組件也會跟著發生相應的變化。這樣，我們就可以在Vue 3中輕松地實現組件交互了。