Vue 3 Setup组件通信详解：Props、Emits、Provide/Inject

在Vue 3中，使用setup函数来定义组件，并且使用ref和reactive函数来创建响应式数据。\n\n通信方式的变化如下：\n\n1. Props: 在Vue 3中，可以使用props选项来声明组件的属性，并且可以使用toRefs函数将属性转换为响应式数据。例如：\n\njavascript\n// ChildComponent.vue\nexport default {\n props: ['message'],\n setup(props) {\n const { message } = toRefs(props);\n return { message };\n }\n}\n\n\n2. Emit: 在Vue 3中，可以使用emits选项来声明组件的自定义事件，并且可以使用$emit函数来触发事件。例如：\n\njavascript\n// ChildComponent.vue\nexport default {\n emits: ['update:message'],\n setup(props, { emit }) {\n const setMessage = (newMessage) => {\n emit('update:message', newMessage);\n };\n return { setMessage };\n }\n}\n\n\n3. Provide/Inject: 在Vue 3中，可以使用provide函数在父组件中提供数据，然后使用inject函数在子组件中注入数据。例如：\n\njavascript\n// ParentComponent.vue\nimport { provide } from 'vue';\n\nexport default {\n setup() {\n const message = ref('Hello');\n provide('message', message);\n }\n}\n\n// ChildComponent.vue\nimport { inject } from 'vue';\n\nexport default {\n setup() {\n const message = inject('message');\n return { message };\n }\n}\n\n\n总的来说，Vue 3中使用setup函数来定义组件，并且使用ref和reactive函数创建响应式数据。在通信方面，可以使用props来声明属性，使用emits来声明自定义事件，以及使用provide和inject来传递数据。