首页 > 其他分享 >vue兄弟组件共享数据

vue兄弟组件共享数据

时间:2023-11-10 12:12:51浏览次数:39  
标签:vue default export 组件 共享 eventBus

1、vue2.x中,兄弟组件共享数据的方式 EventBus。

一、A组件
import eventBus from "@/components/eventBus";
export default {
methods: {
send() {
eventBus.$emit('share', this.str)
}
}
}
</script>
二、eventBus.js
import Vue from "vue";
export default new Vue()

三、B组件
<script>
import eventBus from "@/components/eventBus";
export default {
created() {
eventBus.$on('share', (val) => {
this.msgFormLeft = val
})
}
}
</script>

 

标签:vue,default,export,组件,共享,eventBus
From: https://www.cnblogs.com/record-100/p/17823809.html

相关文章

  • vue3 Suspense
    在Vue.js3中,Suspense是一个用于处理异步组件的特殊组件,它允许你在等待异步组件加载时展示备用内容。这对于优化用户体验、处理懒加载组件或异步数据获取时非常有用。Suspense的主要目标是简化异步操作的状态管理和展示。下面是一个简单的例子,演示了如何在Vue.js3中使用Suspe......
  • 解决Vue中使用wangEditor富文本编辑器复制粘贴word文档携带内容样式文本问题
    前言:本文记录作者在vue项目中使用到wangEditor富文本编辑器复制粘贴功能所遇到的bug,故此把自己所遇到的坑及问题详细的记录下来。如果觉得作者写的不错,希望得到您的点赞/收藏/支持,如果有不同意见,欢迎下方评论区留言。一、自定义处理粘贴的文本内容1、配置自定义处理粘贴的文本内......
  • vue3 KeepAlive
    在Vue.js3中,<keep-alive>是一个抽象组件,用于保留其子组件状态,防止在切换组件时销毁它们。这对于在页面间切换时保留组件的状态或避免重复渲染特定组件非常有用。<keep-alive>主要用于缓存组件,以提高性能和用户体验。以下是一个简单的例子,演示了如何在Vue.js3中使用<keep-ali......
  • Kubernetes常用命令及yml文件、集群网络 Kubernetes组件介绍及环境搭建
    Kubernetes常用命令及yml文件、集群网络Kubernetes组件介绍及环境搭建Kubernetes组件介绍及环境搭建一、kubernetes常用命令说明:因为k8s的命令都是通过kubectl组件接收的,这个组件只在master节点有,所以k8s的命令都是在master节点中执行kubectlgetnodes#查看当前集群中......
  • vue3 Teleport
    在Vue.js3中,Teleport是一种特殊的组件,用于在DOM树中的任何地方渲染其内容,而不受父组件的约束。这对于需要将组件的内容移动到DOM树的其他部分时非常有用,例如在模态框或弹出窗口中使用。Teleport提供了两个名为teleport和teleport-to的指令,用于定义内容的来源和目标位......
  • 通过WebRTC简单实现媒体共享
    通过WebRTC简单实现媒体共享媒体协商在设置本地描述符(offer/answer)前,我们总是需要将媒体添加到连接中,只有这样在描述符中才能包含需要共享的媒体信息,除非你不需要共享媒体。在实际应用中,我们通常没办法让两个客户端直接通信,进行媒体协商。因此我们通常需要一个双方都可以访问......
  • vuejs3.0 从入门到精通——动态组件
    动态组件一、App.vue<template><ul><!--使用ul标签替代了错误的url标签,用于展示列表--><liv-for='(item,index)intabList':key='index'@click="()=>{currentComponent.com=tabList[index].com}"><!--......
  • vue项目中安装scss
    1、安装node-sass、sass-loader简化内容,具体版本等注意事项在下面。(node官网:GitHub-sass/node-sass::rainbow:Node.jsbindingstolibsass)//默认安装最新版本npminstallnode-sass--sava-devnpminstallsass-loader--save-dev//指定安装版本npminstallnode-sass@x.......
  • 为什么在财务共享中心建设初期人员不降反增?
    在财务共享建设过程中,人员规划是极其重要的一环,它牵扯职责调整、岗位变动、编制规模等敏感问题,因此往往受到格外重视,尤其是人员数量的测算。很多企业在财务共享中心上线之初就希望达到立竿见影的减员效果,但从实践经验来看,此期望并不符合实际规律,反之,在上线之初会存在不降反增的情况......
  • 界面控件DevExtreme图表和仪表(v23.1) - 新功能(Angular,React,Vue,jQuery)
    本文将为大家总结下DevExtreme在v23.1版本中发布的一些与图表和仪表盘相关的功能。DevExtreme拥有高性能的HTML5/JavaScript小部件集合,使您可以利用现代Web开发堆栈(包括React,Angular,ASP.NETCore,jQuery,Knockout等)构建交互式的Web应用程序。获取DevExtremev23.1正式版下载Dev......