Vue 组件间如何通信

本文涉及的产品
云数据库 RDS MySQL,集群系列 2核4GB
推荐场景:
搭建个人博客
云数据库 Tair(兼容Redis),内存型 2GB
Redis 开源版,标准版 2GB
推荐场景:
搭建游戏排行榜
简介: Vue组件间通信是指在Vue应用中,不同组件之间传递数据和事件的方法。常用的方式有:props、自定义事件、emitattrs、$refs、provide/inject、Vuex等。掌握这些方法可以实现父子组件、兄弟组件及跨级组件间的高效通信。
  1. 父子组件通信
    • 父组件向子组件通信 - 通过属性绑定(Props)
      • 原理:父组件可以将数据作为属性传递给子组件。在子组件中,通过props选项来接收这些数据。这是一种单向数据流,从父组件到子组件,确保了数据的可预测性和单向性,便于维护组件之间的状态。
      • 示例
        • 父组件模板:
            <template>
                <child-component :message="parentMessage"></child-component>
            </template>
          
          AI 代码解读
          这里的parentMessage是父组件中的数据,通过:(v - bind指令的简写)将其绑定为child - component子组件的message属性。
        • 子组件定义:
            export default {
                     
                props: {
                     
                    message: String
                },
                mounted() {
                     
                    console.log(this.message); 
                }
            }
          
          AI 代码解读
          子组件通过props接收message属性,并在挂载时打印出来。props中的message可以指定类型(如这里的String),还可以设置默认值、验证等其他选项。
    • 子组件向父组件通信 - 通过自定义事件
      • 原理:子组件通过$emit方法触发一个自定义事件,父组件可以在使用子组件的地方通过v - on(简写为@)指令来监听这个事件,并在事件处理函数中获取子组件传递的数据。
      • 示例
        • 子组件模板:
            <template>
                <button @click="sendMessage">向父组件发送消息</button>
            </template>
          
          AI 代码解读
          当点击按钮时,调用sendMessage方法。
        • 子组件方法:
            export default {
                     
                methods: {
                     
                    sendMessage() {
                     
                        this.$emit('child - message', '这是来自子组件的消息');
                    }
                }
            }
          
          AI 代码解读
          这里通过$emit触发了一个名为child - message的自定义事件,并传递了一个字符串作为消息。
        • 父组件模板:
            <template>
                <child-component @child - message="handleChildMessage"></child-component>
            </template>
          
          AI 代码解读
          父组件通过@child - message监听子组件的child - message事件,并在handleChildMessage方法中处理。
        • 父组件方法:
            export default {
                     
                methods: {
                     
                    handleChildMessage(message) {
                     
                        console.log(message); 
                    }
                }
            }
          
          AI 代码解读
          当子组件触发事件时,父组件的handleChildMessage方法会被调用,并接收子组件传递的消息。
  2. 兄弟组件通信
    • 通过共同的父组件作为中介
      • 原理:兄弟组件之间没有直接的通信方式,但是可以通过它们共同的父组件来传递消息。一个兄弟组件通过触发父组件的自定义事件,将消息传递给父组件,然后父组件再将消息传递给另一个兄弟组件。
      • 示例
        • 假设有兄弟组件Brother1Brother2,它们有一个共同的父组件Parent
        • Brother1组件触发事件:
            export default {
                     
                methods: {
                     
                    sendMessageToBrother2() {
                     
                        this.$emit('message - from - brother1', '这是兄弟1发送的消息');
                    }
                }
            }
          
          AI 代码解读
        • 父组件Parent监听Brother1的事件并传递给Brother2
            <template>
                <brother1 @message - from - brother1="handleMessageFromBrother1"></brother1>
                <brother2 :message="brother2Message"></brother2>
            </template>
          
          AI 代码解读
            export default {
                     
                data() {
                     
                    return {
                     
                        brother2Message: ''
                    };
                },
                methods: {
                     
                    handleMessageFromBrother1(message) {
                     
                        this.brother2Message = message;
                    }
                }
            }
          
          AI 代码解读
        • Brother2组件接收父组件传递的消息:
            export default {
                     
                props: {
                     
                    message: String
                },
                mounted() {
                     
                    console.log(this.message); 
                }
            }
          
          AI 代码解读
  3. 非父子、非兄弟组件通信(跨组件通信)
    • 使用事件总线(Event Bus)
      • 原理:创建一个独立的Vue实例作为事件总线,它可以在不同组件之间传递事件和数据。组件可以通过在这个事件总线上$on监听事件和$emit触发事件来实现通信。
      • 示例
        • 创建事件总线(通常在main.js或单独的event - bus.js文件中):
            import Vue from 'vue';
            export const eventBus = new Vue();
          
          AI 代码解读
        • 组件A触发事件:
            import {
                      eventBus } from './event - bus';
            export default {
                     
                methods: {
                     
                    sendMessage() {
                     
                        eventBus.$emit('global - message', '这是来自组件A的消息');
                    }
                }
            }
          
          AI 代码解读
        • 组件B监听事件:
            import {
                      eventBus } from './event - bus';
            export default {
                     
                mounted() {
                     
                    eventBus.$on('global - message', (message) => {
                     
                        console.log(message);
                    });
                }
            }
          
          AI 代码解读
    • 使用Vuex(适用于大型复杂应用)
      • 原理:Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
      • 示例
        • 安装和配置Vuex(在main.js等文件中):
            import Vue from 'vue';
            import Vuex from 'vuex';
            Vue.use(Vuex);
            const store = new Vuex.Store({
                     
                state: {
                     
                    globalMessage: ''
                },
                mutations: {
                     
                    setGlobalMessage(state, message) {
                     
                        state.globalMessage = message;
                    }
                }
            });
            new Vue({
                     
                store,
                //...其他配置
            });
          
          AI 代码解读
        • 组件A提交mutation来修改状态:
            export default {
                     
                methods: {
                     
                    sendMessage() {
                     
                        this.$store.commit('setGlobalMessage', '这是来自组件A的消息');
                    }
                }
            }
          
          AI 代码解读
        • 组件B获取状态:
            export default {
                     
                computed: {
                     
                    globalMessage() {
                     
                        return this.$store.state.globalMessage;
                    }
                },
                mounted() {
                     
                    console.log(this.globalMessage);
                }
            }
          
          AI 代码解读
目录
打赏
0
3
4
0
201
分享
相关文章
|
27天前
|
vue使用iconfont图标
vue使用iconfont图标
127 1
iframe嵌入页面实现免登录思路(以vue为例)
通过上述步骤,可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制,可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景,能够显著提升用户体验。
31 8
Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项?
在使用`v-model`处理自定义组件双向数据绑定时,要仔细考虑各种因素,确保数据的准确传递和更新,同时提供良好的用户体验和代码可维护性。通过合理的设计和注意事项的遵循,能够更好地发挥`v-model`的优势,实现高效的双向数据绑定效果。
167 64
Vue 组件化开发:构建高质量应用的核心
本文深入探讨了 Vue.js 组件化开发的核心概念与最佳实践。
41 1
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
Vue3中v-model在处理自定义组件双向数据绑定时,如何避免循环引用?
Web 组件化是一种有效的开发方法,可以提高项目的质量、效率和可维护性。在实际项目中,要结合项目的具体情况,合理应用 Web 组件化的理念和技术,实现项目的成功实施和交付。通过不断地探索和实践,将 Web 组件化的优势充分发挥出来,为前端开发领域的发展做出贡献。
65 8
在 Vue 3 中,如何使用 v-model 来处理自定义组件的双向数据绑定?
需要注意的是,在实际开发中,根据具体的业务需求和组件设计,可能需要对上述步骤进行适当的调整和优化,以确保双向数据绑定的正确性和稳定性。同时,深入理解 Vue 3 的响应式机制和组件通信原理,将有助于更好地运用 `v-model` 实现自定义组件的双向数据绑定。
Vue的非父子组件之间传值
全局事件总线 一种组件间通信的方式,适用于任意组件间通信

数据库

+关注
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等