首页vue3父子组件间通信

vue3父子组件间通信

时间: 2023-08-22 11:06:59 浏览: 141

在Vue3中，父子组件之间的通信可以通过props和emit来实现。 1. 使用props：父组件可以通过props属性向子组件传递数据。在子组件中，可以通过接收props属性来使用这些数据。在父组件中，可以通过修改props属性的值来实现与子组件的通信。父组件示例： ```vue <template> <div> <child-component :message="parentMessage"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { parentMessage: 'Hello from parent component' }; } }; </script> ``` 子组件示例： ```vue <template> <div> <p>{{ message }}</p> </div> </template> <script> export default { props: { message: { type: String, required: true } } }; </script> ``` 2. 使用emit：子组件可以通过emit方法触发自定义事件，然后父组件可以通过监听这些事件来获取子组件传递的数据。父组件示例： ```vue <template> <div> <child-component @child-event="handleChildEvent"></child-component> <p>{{ messageFromChild }}</p> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { messageFromChild: '' }; }, methods: { handleChildEvent(message) { this.messageFromChild = message; } } }; </script> ``` 子组件示例： ```vue <template> <div> <button @click="sendMessageToParent">Send Message to Parent</button> </div> </template> <script> export default { methods: { sendMessageToParent() { this.$emit('child-event', 'Hello from child component'); } } }; </script> ``` 这两种方式都可以实现父子组件之间的通信，你可以根据具体的需求选择使用哪种方式。

阅读全文