组件间通信(组件间传递数据)

server/2024/11/14 13:12:00/

组件间通信(组件间传递数据)

在 Vue.js 中,组件间通信是开发者需要经常处理的任务,特别是在构建具有多层次组件的复杂应用时。根据组件之间的关系和数据流的复杂程度,可以采用不同的通信方式。以下是常用的几种组件间通信方式:

1. 父子组件通信

父组件向子组件传递数据
  • Props:父组件可以通过 props 向子组件传递数据。Props 是在子组件中声明的属性。
    • 在父组件中使用子组件并传递数据

      <!-- ParentComponent.vue -->
      <template><ChildComponent :message="parentMessage" />
      </template><script>
      import ChildComponent from './ChildComponent.vue';export default {components: { ChildComponent },data() {return {parentMessage: 'Hello from Parent'};}
      };
      </script>
      
    • 在子组件中声明接收 props

      <!-- ChildComponent.vue -->
      <template><div>{{ message }}</div>
      </template><script>
      export default {props: ['message']
      };
      </script>
      
子组件向父组件传递数据
  • 事件传递:子组件通过 $emit 方法发送自定义事件,父组件通过监听这些事件来接收数据。

    • 在子组件中发射事件

      <!-- ChildComponent.vue -->
      <template><button @click="sendMessage">Send to Parent</button>
      </template><script>
      export default {methods: {sendMessage() {this.$emit('messageEvent', 'Hello from Child');}}
      };
      </script>
      
    • 在父组件中监听事件

      <!-- ParentComponent.vue -->
      <template><ChildComponent @messageEvent="receiveMessage" />
      </template><script>
      import ChildComponent from './ChildComponent.vue';export default {components: { ChildComponent },methods: {receiveMessage(msg) {console.log(msg);}}
      };
      </script>
      

2. 兄弟组件通信

  • 通过共同的父组件:通常通过父组件作为中介进行通信。第一个子组件向父组件发射事件,父组件处理后将数据传递给另一个子组件。

3. 非父子组件通信

  • Event Bus(主要在 Vue 2 中使用):创建一个空的 Vue 实例用作事件总线,通过它来发射和监听事件。

    • 设置事件总线

      // event-bus.js
      import Vue from 'vue';
      export const EventBus = new Vue();
      
    • 在组件中使用

      <!-- Sending Component -->
      <script>
      import { EventBus } from './event-bus.js';
      export default {methods: {sendMessage() {EventBus.$emit('message-event', 'Hello World');}}
      };
      </script><!-- Receiving Component -->
      <script>
      import { EventBus } from './event-bus.js';
      export default {mounted() {EventBus.$on('message-event', (msg) => {console.log(msg);});}
      };
      </script>
      
  • Vuex:用于全局状态管理,提供一种集中式的状态存储,并允许所有组件访问。适用于大型应用或需要共享状态的多个组件。

    • 使用 Vuex 的时候,需要在每个组件中使用 mapState, mapGetters, mapMutations, mapActions 等辅助函数来访问和操作全局状态。

4. Provide/Inject

  • Provide/Inject API:用于祖先组件向所有子孙组件传递数据,而无需逐层传递。
    • 在祖先组件中提供数据

      // GrandparentComponent.vue
      <script>
      export default {provide() {return {sharedData: 'This is shared data'};}
      };
      </script>
      
    • 在子孙组件中注入数据

      // AnywhereDeepComponent.vue
      <template><div>{{ sharedData }}</div>
      </template><script>
      export default {inject: ['sharedData']
      };
      </script>
      

每种通信方式都有其适合的场景,根据组件关系和应用复杂度,合理选择可以提高代码的可维护性和可扩展性。

组件间通信(传递数据)

父组件向子组件传递数据

  • 父组件可以通过props向子组件传递数据。在子组件中,使用props选项来接收 父组件定义的数据。
// 父组件
<template><div class="MineralView-container"><h1>[MineralView]</h1><MineralsTable :testDeliverText="testDeliverText"></MineralsTable></div>
</template>data() {return{testDeliverText: 'test'}
// 子组件
// 在子组件中,使用`props`选项来接收 父组件定义的数据
<div>组件间通信: <hr>this data is from MineralView.vue: {{testDeliverText}}
</div>props: ['testDeliverText'],

在这里插入图片描述

子组件向父组件传递数据 – 通过event

<button @click="sendMessage">click, 子组件向父组件传递数据</button>data() {return {title:'Hello from MineralsTable.vue'};},
methods: {// 子组件向父组件传递数据sendMessage() {this.$emit('messageEvent', this.title);},

<MineralsTable:testDeliverText="testDeliverText"@messageEvent="receiveMessage"></MineralsTable><h1>{{testReceiveText}}</h1>data() {return{testDeliverText: 'test',testReceiveText: 'testReceive'}},
methods: {// @messageEvent="receiveMessage"  父组件监听$emit对应事件(以接收该事件携带的数据)// 父组件接收 子组件传递来的数据receiveMessage(msg) {console.log(msg);this.testReceiveText = msg}

http://www.ppmy.cn/server/141593.html

相关文章

在uniapp中封装请求接口 (带刷新token)

import { apiUrl } from /config/global-config.js import { useUserStore } from ../stores import { usePageRoute } from "/composable/usePageRoute.js"// 默认配置 const DEFAULT_CONFIG {timeout: 60000,// showLoading: true,// loadingText: 加载中... }// …

Kubernetes的基本构建块和最小可调度单元pod-0

文章目录 一&#xff0c;什么是pod1.1pod在k8s中使用方法&#xff08;1&#xff09;使用方法一&#xff08;2&#xff09;使用方法二 1.2pod中容器的进程1.3pod的网络隔离管理&#xff08;1&#xff09;pause容器的作用 1.4 Pod分类&#xff1a;&#xff08;1&#xff09;自主式…

C语言第九周课——经典算法

目录 一、冒泡法排序 1.1原理 1.2代码实现&#xff08;以升序排序为例&#xff09; 1.3逻辑 1.4分析 二、二分法查找 2.1原理 2.2代码实现 2.3逻辑 2.4算法效率分析 三、素数判断 3.1原理 3.2代码实现 3.3逻辑 3.4分析 一、冒泡法排序 1.1原理 冒泡排序&…

数据仓库还是数据集市?这俩怎么选?

数据仓库和数据集市作为支持决策分析的两种不同方式&#xff0c;根据各自的特点和优势&#xff0c;有不同的应用场景&#xff0c;今天就来探讨下数据集市和数据仓库该怎么选&#xff1f; 一、数据集市和数据仓库对比 1、数据集市与数据仓库的关系&#xff1a; 1&#xff09;数…

linux进程管理

进程和线程的关系 以下介绍为linux环境 进程是操作系统中一个运行中的程序&#xff0c;是资源分配和调度的基本单位。每个进程有自己独立的内存空间、文件描述符、堆栈等系统资源 线程&#xff08;Thread&#xff09; 是 CPU 调度的最小单位&#xff0c;是进程中的一个执行流…

鲁棒自适应滤波,MATLAB

鲁棒自适应滤波是一种改进的信号处理技术&#xff0c;旨在提高滤波器在面对不确定性和动态环境变化时的性能。它结合了自适应滤波和鲁棒控制的理念&#xff0c;以便在有噪声或异常值的情况下更有效地估计信号。 文章目录 关键特点主要方法数学公式鲁棒性增强示例代码运行结果 总…

BY组态-低代码web可视化组件

体验地址&#xff1a;http://www.byzt.net:90/ 简介 BY组态是集实时数据展示、动态交互等一体的全功能可视化平台。帮助物联网、工业互联网、电力能源、水利工程、智慧农业、智慧医疗、智慧城市等场景快速实现数字孪生、大屏可视化、Web组态、SCADA等解决方案。具有实时监控、多…

pandas的to_sql方法中使用if_exists=‘replace‘

当你在pandas的to_sql方法中使用if_existsappend参数时&#xff0c;它会在导入数据之前删除已存在的表&#xff0c;然后重新创建该表&#xff0c;并将数据导入进去。这意味着表中的所有现有数据将被新数据完全替换。 使用 if_existsreplace 的注意事项&#xff1a; 数据丢失&a…