vue全局属性的传值（非store传值）

最新推荐文章于 2024-10-21 18:00:48 发布

weixin_34113237

最新推荐文章于 2024-10-21 18:00:48 发布

阅读量256

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5b5921fe51882562101be67f

本文介绍如何在Vue项目中使用全局事件中心实现组件间的数据传递。通过main.js文件定义全局eventHub，并展示如何设置和监听自定义事件getCardAccount，从而在不同组件间共享数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

全局data中的值传递（main.js文件）

// main.js文件定义eventHub值
 data: {
    eventHub: new Vue(),
  },
// 设置传入全局eventHub中的值，getCardAccount为自定义函数 getCardAccount中的值为 111
 this.$root.eventHub.$emit(
    "getCardAccount",
    111
  );
// 设置模块下getCardAccount方法为传入getCardAccount函数
 this.$root.eventHub.$on("getCardAccount", this.getCardAccount);
 
// 获取main.js全局值，通过getCardAccount函数获取设置的值
 getCardAccount(val) {
 // val = 111 
    this.roomCard = val;
  },
复制代码