Vue 组件通信方式

news2025/1/14 0:51:34

✨ 专栏介绍

在当今Web开发领域中,构建交互性强、可复用且易于维护的用户界面是至关重要的。而Vue.js作为一款现代化且流行的JavaScript框架,正是为了满足这些需求而诞生。它采用了MVVM架构模式,并通过数据驱动和组件化的方式,使我们能够更轻松地构建出优雅而高效的Web应用程序。在本专栏中,我们将深入学习Vue.js的核心概念、组件开发、状态管理、路由和性能优化等方面的知识。无论你是初学者还是有一定经验的开发者,通过学习Vue.js,你将能够构建出令人印象深刻的用户界面,并提升自己在Web开发领域的竞争力。让我们一起开始Vue.js之旅吧!
在这里插入图片描述

文章目录

    • ✨ 专栏介绍
    • 引言
    • 1. 父子组件通信
      • 代码示例
    • 2. 兄弟组件通信
      • 代码示例
    • 3. Vuex
      • 代码示例
    • 总结
    • 😶 写在结尾


在这里插入图片描述

引言

在Vue开发中,组件通信是一个非常重要的概念。当我们构建一个复杂的应用程序时,组件之间的通信是必不可少的。Vue提供了多种方式来实现组件之间的通信,本文将介绍常用的几种通信方式,并提供相应的代码示例。

1. 父子组件通信

父子组件通信是最常见和简单的一种方式。父组件可以通过props向子组件传递数据,子组件可以通过$emit触发事件向父组件传递数据。

代码示例

<!-- 父组件 -->
<template>
  <div>
    <child-component :message="message" @update="updateMessage"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello World'
    };
  },
  methods: {
    updateMessage(newMessage) {
      this.message = newMessage;
    }
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>

<script>
export default {
  props: ['message'],
  methods: {
    sendMessage() {
      this.$emit('update', 'New Message');
    }
  }
};
</script>

在上面的例子中,父组件通过props将message传递给子组件,并通过@update监听子组件的事件。子组件通过$emit触发update事件,并将新的消息作为参数传递给父组件。

2. 兄弟组件通信

兄弟组件通信是指两个没有直接父子关系的组件之间的通信。在Vue中,我们可以使用一个空的Vue实例作为中央事件总线来实现兄弟组件之间的通信。

代码示例

<!-- 中央事件总线 -->
<script>
import Vue from 'vue';
export default new Vue();
</script>
<!-- 组件A -->
<template>
  <div>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>

<script>
import EventBus from './EventBus.js';

export default {
  methods: {
    sendMessage() {
      EventBus.$emit('message', 'Hello World');
    }
  }
};
</script>
<!-- 组件B -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import EventBus from './EventBus.js';

export default {
  data() {
    return {
      message: ''
    };
  },
  mounted() {
    EventBus.$on('message', (message) => {
      this.message = message;
    });
  }
};
</script>

在上面的例子中,我们创建了一个空的Vue实例作为中央事件总线。组件A通过EventBus触发
事件,并将消息作为参数传递给其他监听该事件的组件。组件通过emit触发message事件,并将消息作为参数传递给其他监听该事件的组件。组件B通过EventBus.on监听message事件,并在事件触发时更新自己的数据。

注意:在这个例子中,我们使用了一个空的Vue实例作为中央事件总线(EventBus),但实际上也可以使用其他方式来实现兄弟组件之间的通信,比如使用全局变量或者通过父组件传递给子组件再传递给兄弟组件等方式。选择合适的方式取决于具体的需求和项目架构。

3. Vuex

Vuex是Vue的官方状态管理库,它可以用于管理应用程序的所有组件的状态。通过Vuex,我们可以在不同的组件之间共享和修改数据。

代码示例

<!-- store.js -->
<script>
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    message: 'Hello World'
  },
  mutations: {
    updateMessage(state, newMessage) {
      state.message = newMessage;
    }
  }
});
</script>
<!-- 组件A -->
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapState(['message'])
  },
  methods: {
    ...mapMutations(['updateMessage'])
  }
};
</script>
<!-- 组件B -->
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapState(['message'])
  },
  methods: {
    ...mapMutations(['updateMessage'])
  }
};
</script>

在上面的例子中,我们创建了一个store来管理应用程序的状态。组件A和组件B都通过mapState将store中的message映射为自己的计算属性。组件A和组件B都可以通过mapMutations调用store中的updateMessage方法来更新message。

总结

本文介绍了Vue中常用的几种组件通信方式,包括父子组件通信、兄弟组件通信和使用Vuex进行状态管理。不同的场景和需求可能需要选择不同的通信方式,开发者可以根据具体情况选择合适的方式来实现组件之间的通信。


😶 写在结尾

前端设计模式专栏
在这里插入图片描述
设计模式是软件开发中不可或缺的一部分,它们帮助我们解决了许多常见问题,并提供了一种优雅而可靠的方式来构建应用程序。在本专栏中,我们介绍了所有的前端设计模式,包括观察者模式、单例模式、策略模式等等。通过学习这些设计模式,并将其应用于实际项目中,我们可以提高代码的可维护性、可扩展性和可重用性。希望这个专栏能够帮助你在前端开发中更好地应用设计模式,写出高质量的代码。点击订阅前端设计模式专栏

Vue专栏
在这里插入图片描述
Vue.js是一款流行的JavaScript框架,用于构建用户界面。它采用了MVVM(Model-View-ViewModel)的架构模式,通过数据驱动和组件化的方式,使开发者能够更轻松地构建交互性强、可复用的Web应用程序。在这个专栏中,我们将深入探讨Vue.js的核心概念、组件开发、状态管理、路由和性能优化等方面的知识。我们将学习如何使用Vue.js构建响应式的用户界面,并探索其强大的生态系统,如Vue Router和Vuex、Pinia。通过学习这些内容,你将能够成为一名熟练的Vue.js开发者,并能够应用这些知识来构建复杂而高效的Web应用程序。点击订阅Vue专栏

JavaScript(ES6)专栏在这里插入图片描述

JavaScript是一种广泛应用于网页开发和后端开发的脚本语言。它具有动态性、灵活性和易学性的特点,是构建现代Web应用程序的重要工具之一。在这个专栏中,我们将深入探讨JavaScript语言的基本语法、DOM操作、事件处理、异步编程以及常见算法和数据结构等内容。此外,我们还将介绍ES6(ECMAScript 2015)及其后续版本中引入的新特性,如箭头函数、模块化、解构赋值等。通过学习这些内容,你将能够成为一名熟练的JavaScript开发者,并能够应用这些知识来构建出高质量和可维护的Web应用程序。点击订阅JavaScript(ES6)专栏

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1401261.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

天津想转行学python培训班靠谱吗?

现在的职业如此繁多&#xff0c;很多人把高薪当成衡量工作好坏的重要标准&#xff0c;因此IT行业以超出其他行业几倍薪资水平成为不错的选择&#xff0c;而Python又以其简单易学好上手成为大家所青睐的学习目标。 Python发展前景如何 Python语言就业发展方向广泛&#xff1a;…

SpringSecurity+OAuth2.0 搭建认证中心和资源服务中心

目录 1. OAuth2.0 简介 2. 代码搭建 2.1 认证中心&#xff08;8080端口&#xff09; 2.2 资源服务中心&#xff08;8081端口&#xff09; 3. 测试结果 1. OAuth2.0 简介 OAuth 2.0&#xff08;开放授权 2.0&#xff09;是一个开放标准&#xff0c;用于授权第三方应用程序…

java垃圾回收GC过程

GC&#xff08;Gabage Collection&#xff09; 用于回收堆中的垃圾数据 清理方法 1.标记-清理 对数据标记&#xff0c;然后清理 缺点&#xff1a;容易产生内存碎片 2.标记-整理 对标记后的数据清理&#xff0c;剩下数据前移 缺点&#xff1a;每次清理后数据都要迁移&#xff0…

代码随想录二刷 | 回溯 | 组合优化

代码随想录二刷 &#xff5c; 回溯 &#xff5c; 组合优化 剪枝优化 剪枝优化 在遍历的过程中有如下代码&#xff1a; for (int i startIndex; i < n; i) {path.pop_back();backtracking(n, k, i 1);path.pop_back(); }n 4&#xff0c;k 4的话&#xff0c;那么第一层f…

qemu使用

百度qemu bios 问题 坑爹的玩意&#xff0c;编译qemu 还需要python3.5以上 解决方法&#xff1a; CentOS7安装Python3.8-CSDN博客 https://www.cnblogs.com/Oliver.net/p/7211967.html 编译python3.8还由于openssl过低 参考 QEMU启动x86-Linux内核_qemu-system-x86-…

SaaS多租户篇

文章目录 1. 多租户是什么2. 技术组件2.1 如何实现多租户的DB封装2.2 如何实现多租户的redis封装2.3 如何实现多租户的Web和Security封装2.4 如何实现多租户的Job封装2.5 如何实现多租户的 MQ 与 Async 封装&#xff1f;2.6 如何实现多租户的 AOP 与 Util 封装&#xff1f; 3.业…

【Qt之模型视图】5. Qt库提供的视图便捷类

1. 前言 Qt提供了一些便捷的视图类&#xff0c;如QListWidget提供项目列表&#xff0c;QTreeWidget显示多级树结构&#xff0c;QTableWidget提供单元格项的表格。每个类都继承了QAbstractItemView类的行为&#xff0c;QAbstractItemView类实现了项目选择和标题管理的通用行为。…

《WebKit 技术内幕》之五(1): HTML解释器和DOM 模型

第五章 HTML 解释器和 DOM 模型 1.DOM 模型 1.1 DOM标准 DOM &#xff08;Document Object Model&#xff09;的全称是文档对象模型&#xff0c;它可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。这里的文档可以是 HTML 文档、XML 文档或者 XHTML 文档。D…

ubuntu 相关内容

ubuntu 优盘安装&#xff1a; 台式机安装纯ubuntu系统的操作步骤-CSDN博客https://blog.csdn.net/youngwah292/article/details/127032009?ops_request_misc%257B%2522request%255Fid%2522%253A%2522170583039216800213099577%2522%252C%2522scm%2522%253A%252220140713.1301…

音视频开发ffmpeg

ffmpeg数据结构 重要的结构体 压缩数据 avpacket 帧数据 avframe 管家&#xff1a; avformatcontext 格式上下文 文件是一种协议 解协议&#xff08;http、rtsp rtmp mms tcp udp…&#xff09; AVIOContext URLProtocol URLContext存储音视频中的协议类型和状态 有缓冲区…

74.搜索二维矩阵 - 力扣(LeetCode)

题目描述 给你一个满足下述两条属性的 m x n 整数矩阵&#xff1a; 每行中的整数从左到右按非严格递增顺序排列。 每行的第一个整数大于前一行的最后一个整数。 给你一个整数 target &#xff0c;如果 target 在矩阵中&#xff0c;返回 true &#xff1b;否则&#xff0c;返回…

爬虫案例—雪球网行情中心板块数据抓取

爬虫案例—雪球网行情中心板块数据抓取 雪球网行情中心网址&#xff1a;https://xueqiu.com/hq 目标&#xff1a;市场一览板块、热股榜板块、新股预告板块、关注排行榜板块 import datetimeimport requestsheaders {user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10…

算法优化:LeetCode第122场双周赛解题策略与技巧

接下来会以刷常规题为主 &#xff0c;周赛的难题想要独立做出来还是有一定难度的&#xff0c;需要消耗大量时间 比赛地址 3011. 判断一个数组是否可以变为有序 public class Solution {public int minimumCost(int[] nums) {if (nums.length < 3) {// 数组长度小于3时&a…

即插即用篇 | AKConv:具有任意采样形状和任意参数数量的卷积核

基于卷积操作的神经网络在深度学习领域取得了显著的成果,但标准卷积操作存在两个固有缺陷。一方面,卷积操作受限于局部窗口,无法捕捉其他位置的信息,而其采样形状是固定的。另一方面,卷积核的大小固定为kk,呈固定的正方形形状,而参数数量往往随大小呈平方增长。显然,不…

章鱼网络 Community Call #17|打造全新 Omnity 跨链协议

香港时间2024年1月8日12点&#xff0c;章鱼网络举行第17期 Community Call。 对于 Octopus Community 而言&#xff0c;2023年是一个分水岭。我们如期兑现我们的承诺&#xff0c;成功上线了包括 $NEAR Restaking 和 Adaptive IBC 在内的完整的 Octopus 2.0。 自从我们在2023年…

编曲学习:Cubase12导入Cubasis工程的方法!

Steinberg 发布 Cubasis 3 项目导入器&#xff0c;可将 Cubasis 的项目导入到 Cubase 使用https://m.midifan.com/news_body.php?id35635 我偶然看到这个文章&#xff0c;不过发现Cubase12默认好像没有这个选项&#xff0c;心想着要是移动端能和PC端同步&#xff0c;感觉会挺…

腾讯云服务器价格查询,2024更新

腾讯云服务器租用优惠价格表&#xff1a;轻量应用服务器2核2G3M价格62元一年、2核2G4M价格118元一年&#xff0c;540元三年、2核4G5M带宽218元一年&#xff0c;2核4G5M带宽756元三年、轻量4核8G12M服务器646元15个月&#xff1b;云服务器CVM S5实例2核2G配置280.8元一年、2核4G…

力扣509. 斐波那契数

动态规划 思路&#xff1a; 斐波那契数通式&#xff1a;F(n) F(n - 1) F(n - 2)&#xff1b;以此为状态转移方程&#xff0c;对其进行动态规划&#xff1b;边界条件&#xff1a; F(0) 0F(1) 1使用两个变量来存储上一组结果&#xff1b; class Solution { public:int fib(…

触摸屏监控双速电动机-PLC I/O电路设计

PLC的输入接线电路图 PLC的输入接线电路如图1-21所示。24VDC电源选用0.7mm2的棕色和蓝色软铜导线&#xff0c;弱电信号线用0.5~0.7mm2的黑色或者白色软铜导线。 PLC输入接线图 PLC的输出接线电路图 PLC的输出接线电路如图1-22所示。AC220V接触器型号为CJX2-12&#xff0c;线…

Kubernetes实战(十八)-Pod配置污点和容忍

1 污点 1.1 污点简介 亲和性调度的方式都是站在Pod的角度上&#xff0c;通过在Pod上增加属性来将Pod调度到到指定的节点上&#xff0c;其实也可以站在Node节点的角度上&#xff0c;通过给Node节点设置属性&#xff0c;来决定是否允许Pod调度过来&#xff0c;这就是污点。 No…