Vue2常用的组件通信方式有几种

Vue2 组件通信方式详解

  1. 父子组件通信(Props)

  2. 子父组件通信($emit)

  3. 兄弟组件通信(Event Bus)

  4. Vuex 状态管理

  5. Provide / Inject

1. 父子组件通信(Props)

定义:

通过在父组件中使用属性(Props)传递数据给子组件。

代码示例:

父组件:

<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',
    };
  },
};
</script>

子组件:

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: ['message'],
};
</script>

2. 子父组件通信($emit)

定义:

通过在子组件中使用 $emit 触发自定义事件,父组件监听并响应。

代码示例:

子组件:

<template>
  <button @click="sendMessage">Send Message to Parent</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('custom-event''Hello from Child');
    },
  },
};
</script>

父组件:

<template>
  <div>
    <child-component @custom-event="handleCustomEvent"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  methods: {
    handleCustomEvent(message) {
      console.log('Received message from child:', message);
    },
  },
};
</script>

3. 兄弟组件通信(Event Bus)

定义:

通过创建一个事件总线(Event Bus)来实现兄弟组件之间的通信。

代码示例:

Event Bus 文件:

// EventBus.js
import Vue from 'vue';
export const EventBus = new Vue();

兄弟组件1:

<template>
  <button @click="sendMessage">Send Message to Brother</button>
</template>

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

export default {
  methods: {
    sendMessage() {
      EventBus.$emit('custom-event''Hello from Brother1');
    },
  },
};
</script>

兄弟组件2:

<template>
  <p>{{ message }}</p>
</template>

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

export default {
  data() {
    return {
      message'',
    };
  },
  created() {
    EventBus.$on('custom-event', (message) => {
      this.message = message;
    });
  },
};
</script>

4. Vuex 状态管理

定义:

使用 Vuex 管理全局状态,实现任意组件之间的通信。

代码示例:

安装 Vuex:

npm install vuex --save

创建 Store 文件:

// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    globalMessage'',
  },
  mutations: {
    setGlobalMessage(state, message) {
      state.globalMessage = message;
    },
  },
});

使用 Vuex 的组件1:

<template>
  <button @click="sendMessage">Send Message to Anywhere</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$store.commit('setGlobalMessage''Hello from Vuex');
    },
  },
};
</script>

使用 Vuex 的组件2:

<template>
  <p>{{ globalMessage }}</p>
</template>

<script>
export

 default {
  computed: {
    globalMessage() {
      return this.$store.state.globalMessage;
    },
  },
};
</script>

5. Provide / Inject

定义:

通过 provideinject 提供和注入属性来实现祖先和后代之间的通信。

代码示例:

祖先组件:

<template>
  <div>
    <descendant-component></descendant-component>
  </div>
</template>

<script>
import { provide } from 'vue';
import { globalMessage } from './symbols.js';

export default {
  setup() {
    provide(globalMessage, 'Hello from Ancestor');
  },
};
</script>

后代组件:

<template>
  <p>{{ ancestorMessage }}</p>
</template>

<script>
import { inject } from 'vue';
import { globalMessage } from './symbols.js';

export default {
  setup() {
    const ancestorMessage = inject(globalMessage);
    return { ancestorMessage };
  },
};
</script>

Symbols 文件:

// symbols.js
import { Symbol } from 'vue';
export const globalMessage = Symbol('globalMessage');

本文由 mdnice 多平台发布

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

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

相关文章

在MySQL数据库中进行连接查询中的外连接查询

左外连接 特征&#xff1a;以左表为主&#xff0c;显示左表所有数据&#xff0c;相关联存在相同的值时显示对应数据&#xff0c;否则显示为NULL 语法&#xff1a;> select 表名.字段名称&#xff0c;表名.字段名称 from 表名 left join 表名 on 相关联的字段…

Linux java jni调用C++封装动态库

由于项目中java需要调用第三方提供的C动态库&#xff1b;由于第三方动态库传入的参数较多&#xff0c;还伴随着指针传入操作&#xff0c;导致java调用极为不便&#xff01;因此催生出对于第三方的C动态库进行二次封装。java调用只需按结构传入一个结构化的string即可。话不多说…

使用匿名labmda表达式对一个函数的参数是个函数类型的具体实现时的 双向回调数据 双向处理业务逻辑

双向回调数据 双向处理业务逻辑在android的应用场景就是:Activity界面的RecyclerView与Adapter双向的相互传递数据处理业务逻辑 class HigherOrderFunctionSuspendActivity : ComponentActivity() {override fun onCreate(savedInstanceState: Bundle?){//简化前 num表示参…

卧槽!这项目开源了!【送源码 】

随着科技的飞速发展&#xff0c;个人财务管理变得越来越重要。一个名为‘Maybe’的创新型个人财务与财富管理应用程序随之诞生&#xff0c;它以其丰富的功能和用户友好的界面受到了广大用户的关注。 现在项目方将这个价值 100万美元的个人理财应用项目开源了 Maybe Maybe应用…

Attention as an RNN

摘要 https://arxiv.org/pdf/2405.13956 Transformer的出现标志着序列建模领域的一个重大突破&#xff0c;它提供了一种高性能架构&#xff0c;能够充分利用GPU并行性。然而&#xff0c;Transformer在推理时计算成本高昂&#xff0c;限制了其应用&#xff0c;特别是在资源受限的…

吴恩达2022机器学习专项课程C2W2:2.19 sigmoid函数的替代方案 2.20如何选择激活函数 2.21 激活函数的重要性

这里写目录标题 引言sigmoid激活函数的局限1.回顾需求案例2.ReLU激活函数 常用的激活函数1.线性激活函数的解释 如何选择激活函数&#xff1f;1.选择输出层的激活函数2.选择隐藏层的激活函数 选择激活函数的总结1.输出层总结2.隐藏层总结3.TensorFlow设置激活函数 激活函数多样…

AI生成视频解决方案,降低成本,提高效率

传统的视频制作方式往往受限于高昂的成本、复杂的拍摄流程以及硬件设备的限制&#xff0c;为了解决这些问题&#xff0c;美摄科技凭借领先的AI技术&#xff0c;推出了全新的AI生成视频解决方案&#xff0c;为企业带来前所未有的视觉创新体验。 一、超越想象的AI视频生成 美摄…

大模型时代的具身智能系列专题(四)

google deepmind团队 谷歌旗下最大的两个 AI 研究机构——地处伦敦 DeepMind 与位于硅谷的 Google Brain 合并成立新部门 Google DeepMind。其将机器学习和系统神经科学的最先进技术结合起来&#xff0c;建立强大的通用学习算法。代表作有AlphaGo&#xff0c;AlphaStar&#x…

SpringBoot集成mongodb

引入maven依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-mongodb</artifactId></dependency>添加yaml配置 spring:data:mongodb:uri: mongodb://localhost:27017/novel创建实体类…

鸿蒙ArkTS声明式开发:跨平台支持列表【组件快捷键事件】

组件快捷键事件 开发者可以设置组件的自定义组合键&#xff0c;组合键的行为与click行为一致&#xff0c;组件在未获得焦点状态下也可以响应自定义组合键&#xff0c;每个组件可以设置多个组合键。 说明&#xff1a; 开发前请熟悉鸿蒙开发指导文档&#xff1a; gitee.com/li-s…

Xshell远程连接服务器需要哪些依赖包、

在安装 Xshell 时&#xff0c;您需要确保系统中安装了必要的依赖库文件。这些依赖库文件对于 Xshell 的正常运行至关重要。虽然具体的依赖库文件可能会根据您的操作系统和安装环境有所不同&#xff0c;但通常包括以下几种&#xff1a; libXdmcp-devellibXinerama-devellibXft-…

香橙派 AiPro通过Micro USB接口进行串口调试

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、配置步骤1.安装CH343驱动2.配置串口参数 二、使用步骤总结 前言 最近在玩一个新玩具香橙派 AiPro&#xff0c;除了通过SSH方式连接开发板以外&#xff0c;…

Java优化代码攻略

一、背景 编码优化是Java开发中的关键步骤&#xff0c;它关注于提升代码可读性、性能和资源效率。常见技巧包括简化逻辑、减少冗余、利用缓存、优化数据结构等。例如&#xff0c;在电商系统中&#xff0c;通过缓存热门商品数据&#xff0c;可大幅提升页面加载速度&#xff1b;…

C++类与对象的特性

1.类的静态成员 静态成员包括静态成员变量和静态成员函数。使用静态成员变量可以实现类的数据成员的共享。 静态成员变量的值可以修改&#xff0c;并且对类的每个对象都相同,它是所有类对象共有的数据,对对象而言节约了空间。其存储空间的分配不在构造函数内完成&#…

华为机考入门python3--(32)牛客32-密码截取

分类&#xff1a;最长对称子串、动态规划 知识点&#xff1a; 生成二维数组 dp [[0] * n for _ in range(n)] 求最大值 max(value1, value2) 动态规划的步骤 a. 定义问题 长度为n下最长的对称子串的长度 b. 确定状态 dp[i][j]表示字符串从索引i到j的子串是否为对称…

关于Vue本地图片转file传到后端服务器(不通过组件上传)

一、代码 // 核心代码 const getMyFileFromLocalPath (localPath, filename) > {return fetch(localPath).then((response) > response.blob()).then((blob) > new File([blob], filename, { type: "image/png" })); // 假设是PNG格式// 获取真正的流文件…

Hibernate最新6万字面试题及参考答案

目录 什么是Hibernate? Hibernate的主要组件有哪些? 解释ORM(对象关系映射)的概念。

Vue3的setup系列篇之defineEmits和defineProps使用方式

父组件参数 <template><div><h2>子组件联动的与使用</h2><!-- reactive这样 --><!-- <childCom v-model:user"data.user" v-model"money" /> --><!-- ref这样 --><childCom v-model:user"user&q…

封装,static,代码块,对象的打印

封装&#xff0c;static&#xff0c;代码块&#xff0c;对象的打印 1. 封装1.1 封装的概念1.2 包的概念1.3 访问修饰限定符1.4 被封装的属性如何set和get&#xff1f; 2. static2.1 再谈学生类2.2 static修饰成员变量2.3 static修饰成员方法2.4 static成员变量初始化 3. 代码块…

IGMP——组播成员端网络协议

目录 一.IGMP基本概念 &#xff08;1&#xff09;组播转发困境 &#xff08;2&#xff09;感知组播成员方式 &#xff08;3&#xff09;IGMP版本 二.IGMP各版本的区别与联系 &#xff08;1&#xff09;IGMPV1 1.普遍组查询报文 2.成员关系报告报文 3.IGMPV1报文格式 4…