在Vue中，父子组件之间传值通信有多种方法，可以通过props、$emit、provide/inject等方式实现。
- 使用props和$emit： 父组件可以通过props向子组件传递数据，子组件通过$emit触发自定义事件将数据传递给父组件。
父组件示例：
<template> <div> <child-component :message="message" @update-message="updateMessage"></child-component> <p>父组件消息：{{ message }}</p> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { data() { return { message: 'Hello', }; }, components: { ChildComponent, }, methods: { updateMessage(newMessage) { this.message = newMessage; }, }, }; </script>
子组件示例：
<template> <div> <p>子组件消息：{{ message }}</p> <button @click="changeMessage">改变消息</button> </div> </template> <script> export default { props: ['message'], methods: { changeMessage() { this.$emit('update-message', 'New message from child component'); }, }, }; </script>
- 使用$emit触发事件： 父组件可以通过$emit触发自定义事件，子组件通过监听该事件获取父组件传递的值。
父组件示例：
<template> <div> <child-component @custom-event="handleCustomEvent"></child-component> <p>父组件消息：{{ message }}</p> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { data() { return { message: '', }; }, components: { ChildComponent, }, methods: { handleCustomEvent(newMessage) { this.message = newMessage; }, }, }; </script>
子组件示例：
<template> <div> <button @click="emitCustomEvent">传递消息</button> </div> </template> <script> export default { methods: { emitCustomEvent() { this.$emit('custom-event', 'New message from child component'); }, }, }; </script>
- 使用provide/inject： 父组件可以通过provide提供数据，子组件通过inject注入获取父组件传递的数据。
父组件示例：
<template> <div> <child-component></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { provide: { message: 'Hello', }, components: { ChildComponent, }, }; </script>
子组件示例：
<template> <div> <p>子组件消息：{{ message }}</p> </div> </template> <script> export default { inject: ['message'], }; </script>
这些方法都可以实现父子组件之间的传值通信，根据具体的业务需求，选择合适的方法即可。
