Vue3 组件间通信：props 和 emit 的使用详解

在Vue3中，组件之间的通信可以通过props和emit来实现。\n\n1. 使用props传递数据：父组件可以通过props将数据传递给子组件，子组件可以通过props接收父组件传递过来的数据。在子组件中，可以直接使用props中的数据进行展示或者其他操作。\n\nvue\n// ParentComponent.vue\n<template>\n <div>\n <ChildComponent :message="message" />\n </div>\n</template>\n\n<script>\nimport ChildComponent from './ChildComponent.vue';\n\nexport default {\n components: {\n ChildComponent\n },\n data() {\n return {\n message: 'Hello World!'\n }\n }\n}\n</script>\n\n// ChildComponent.vue\n<template>\n <div>\n {{ message }}\n </div>\n</template>\n\n<script>\n export default {\n props: {\n message: {\n type: String,\n required: true\n }\n }\n}\n</script>\n\n\n2. 使用emit触发事件：子组件可以通过emit触发一个自定义事件，并将数据作为参数传递给父组件。父组件可以通过监听这个自定义事件来接收子组件传递过来的数据。\n\nvue\n// ParentComponent.vue\n<template>\n <div>\n <ChildComponent @update-message="updateMessage" />\n <p>{{ message }}</p>\n </div>\n</template>\n\n<script>\nimport ChildComponent from './ChildComponent.vue';\n\nexport default {\n components: {\n ChildComponent\n },\n data() {\n return {\n message: 'Hello World!'\n }\n },\n methods: {\n updateMessage(newMessage) {\n this.message = newMessage;\n }\n }\n}\n</script>\n\n// ChildComponent.vue\n<template>\n <div>\n <button @click="updateMessage">Update Message</button>\n </div>\n</template>\n\n<script>\n export default {\n methods: {\n updateMessage() {\n this.$emit('update-message', 'New Message');\n }\n }\n}\n</script>\n\n\n以上是两种常用的组件之间通信的方式，可以根据具体需求选择适合的方式来实现组件之间的通信。