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

embedded/2024/11/13 15:06:33/

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

在 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/embedded/136985.html

相关文章

MacBook 下载vscode不能被解压及打开的解决方案

mac 下载vscode不能被解压解决方案如下 1.下载全能解压 进行解压 解压完如果提示 已损坏&#xff0c;无法打开。 您应该将它移到废纸篓 2.允许“任何来源”开启 开启终端输入 sudo spctl --master-disable回车 3. 扩展文件属性 先输入 sudo xattr -r -d com.apple.quaran…

C#核心(8) 静态成员

前言 先前我们已经学习了成员变量以及成员属性。 静态成员对于在整个应用程序中共享数据和功能非常有用。它们可以用于跟踪全局状态、共享常量和实现单例模式等。但是需要注意的是&#xff0c;过度使用静态成员可能导致代码变得难以维护和测试&#xff0c;因此应谨慎使用。其…

深⼊理解指针(5)[回调函数、qsort相关知识(qsort可用于各种类型变量的排序)】

目录 1. 回调函数 2. qsort相关知识&#xff08;qsort可用于各种类型变量的排序&#xff09; 一 回调函数 1定义/作用:把函数的指针&#xff08;地址&#xff09;作为参数传递给另⼀个函数&#xff0c;当这个指针被⽤来调⽤其所指向的函数 时&#xff0c;被调⽤的函数就…

蓝桥杯 懒洋洋字符串--字符串读入

题目 代码 #include <iostream>using namespace std;int main(){int n;cin>>n;char s[210][4];int ans0;for(int i0;i<n;i){scanf("%s",s[i]);}for(int i0;i<n;i){char as[i][0];char bs[i][1];char cs[i][2];// cout<<a<< <<b…

Python实例:爱心代码

前言 在编程的奇妙世界里,代码不仅仅是冰冷的指令集合,它还可以成为表达情感、传递温暖的独特方式。今天,我们将一同探索用 Python 语言绘制爱心的神奇之旅。 爱心,这个象征着爱与温暖的符号,一直以来都在人类的情感世界中占据着特殊的地位。而通过 Python 的强大功能,…

第1章: 初识Pillow(PIL)

1.1 Pillow简介与历史 Pillow 是 Python 的图像处理库&#xff0c;由原始的 Python Imaging Library&#xff08;PIL&#xff09;发展而来。PIL 最早由 Fredrik Lundh 开发&#xff0c;是 Python 社区中用于图像处理的最早库之一。然而&#xff0c;PIL 的开发逐渐停滞&#xf…

Tokenformer:基于参数标记化的高效可扩展Transformer架构

本文是对发表于arXiv的论文 “TOKENFORMER: RETHINKING TRANSFORMER SCALING WITH TOKENIZED MODEL PARAMETERS” 的深入解读与扩展分析。主要探讨了一种革新性的Transformer架构设计方案&#xff0c;该方案通过参数标记化实现了模型的高效扩展和计算优化。 论文动机 如今的人…

Python数据分析NumPy和pandas(二十八、使用pandas和seaborn绘图)

matplotlib 是一个相对很基础的工具。可以从其基本组件组装绘图&#xff1a;数据显示&#xff08;即绘图类型&#xff1a;线、条、框、散点、等值线等&#xff09;、图例、标题、刻度标签和注释等。 在 pandas 中&#xff0c;我们可能有多个数据列&#xff0c;以及行和列标签。…