父子组件通信详解

在 Vue.js 中，组件化开发是核心思想之一。组件之间的通信是开发中经常遇到的问题，尤其是父子组件之间的通信。本文将详细介绍 Vue.js 中父子组件通信的方法，并通过一个详细的案例来讲解。

1. 父组件向子组件传递数据（props）

父组件通过 `props` 向子组件传递数据。`props` 是父组件用来传递数据到子组件的一个自定义属性。

案例：父组件传递消息到子组件

首先，我们创建一个父组件 `ParentComponent.vue` 和一个子组件 `ChildComponent.vue`。

ParentComponent.vue

<template>
    <div>
        <h2>父组件</h2>
        <input v-model="message" placeholder="输入消息" />
        <ChildComponent :message="message" />
    </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
    components: {
        ChildComponent
    },
    data() {
        return {
            message: ''
        };
    }
};
</script>

ChildComponent.vue

<template>
    <div>
        <h3>子组件</h3>
        <p>接收到的消息: {{ message }}</p>
    </div>
</template>

<script>
export default {
    props: {
        message: {
            type: String,
            required: true
        }
    }
};
</script>

2. 子组件向父组件传递数据（事件）

子组件可以通过触发事件向父组件传递数据。父组件监听子组件的事件，并在事件处理函数中接收数据。

案例：子组件发送消息到父组件

我们继续使用上面的 `ParentComponent.vue` 和 `ChildComponent.vue`，并添加子组件向父组件发送消息的功能。

修改 ChildComponent.vue

<template>
    <div>
        <h3>子组件</h3>
        <p>接收到的消息: {{ message }}</p>
        <button @click="sendMessageToParent">发送消息到父组件</button>
    </div>
</template>

<script>
export default {
    props: {
        message: {
            type: String,
            required: true
        }
    },
    methods: {
        sendMessageToParent() {
            this.$emit('messageToParent', '这是子组件发送的消息');
        }
    }
};
</script>

修改 ParentComponent.vue

<template>
    <div>
        <h2>父组件</h2>
        <input v-model="message" placeholder="输入消息" />
        <ChildComponent :message="message" @messageToParent="handleMessageFromChild" />
        <p>从子组件接收的消息: {{ parentMessage }}</p>
    </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
    components: {
        ChildComponent
    },
    data() {
        return {
            message: '',
            parentMessage: ''
        };
    },
    methods: {
        handleMessageFromChild(message) {
            this.parentMessage = message;
        }
    }
};
</script>

总结

本文介绍了 Vue.js 中父子组件通信的两种基本方法：父组件通过 `props` 向子组件传递数据，子组件通过事件向父组件传递数据。通过这两个方法，我们可以在 Vue.js 应用中实现灵活的组件通信。