目錄
Vue.js 父子组件的通信
Vue.js 是一個輕量級的 JavaScript 框架，它可以讓開發者快速開發出優秀的 Web 應用程式。Vue.js 提供了一個簡單的方法來建立父子組件之間的通信，讓開發者可以更容易地建立和管理組件之間的關係。
在 Vue.js 中，父子組件之間的通信可以通過 props 來完成。props 是一個特殊的物件，它可以讓父組件向子組件傳遞資料。
舉個例子，假設我們有一個父組件 Parent，它有一個子組件 Child，我們可以在 Parent 組件中定義一個 message 的 prop，然後在 Child 組件中使用它：
// Parent.vue
<template>
<div>
<Child :message="message" />
</div>
</template>
<script>
import Child from './Child.vue'
export default {
components: {
Child
},
data() {
return {
message: 'Hello World!'
}
}
}
</script>
// Child.vue
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
props: {
message: String
}
}
</script>
在上面的範例中，我們在 Parent 組件中定義了一個 message 的 prop，並將它傳遞給 Child 組件，然後在 Child 組件中就可以使用 message 來顯示資料了。
另外，Vue.js 還提供了另一種方式來完成父子組件之間的通信，那就是 自定義事件。自定義事件可以讓子組件向父組件傳遞資料，例如：
// Parent.vue
<template>
<div>
<Child @message="handleMessage" />
</div>
</template>
<script>
import Child from './Child.vue'
export default {
components: {
Child
},
methods: {
handleMessage(message) {
console.log(message)
}
}
}
</script>
// Child.vue
<template>
<div>
<button @click="sendMessage">Send Message</button>
</div>
</template>
<script>
export default {
methods: {
sendMessage() {
this.$emit('message', 'Hello World!')
}
}
}
</script>
在上面的範例中，我們在 Parent 組件中定義了一個 handleMessage 的方法，然後在 Child 組件中使用 $emit 方法向父組件傳遞資料。
總結來說，Vue.js 提供了一個簡單的方法來建立父子組件之間的通信，讓開發者可以更容易地建立和管理組件之間的關係。
推薦閱讀文章
Vue.js 父子组件的通信
Vue.js 父子组件的数据传递
Vue.js 父子组件的事件传递
Vue.js 父子组件的生命周期
Vue.js 父子组件的混合</a