首页 > 其他分享 >vue组件间通信

vue组件间通信

时间:2022-12-20 10:25:42浏览次数:46  
标签:触发 vue 间通信 使用 组件 eventBus emit

  1. 使用props和$emit实现父子组件通信
    首先在父组件中使用这个:<children :listdata='listdata'/>
    然后就可以在子组件的props中拿到

  2. 使用pubsub实现任意组件通信
    需要下载pubsub-js,具体用法跟在react中差不多
    provide提供使用的方法,inject使用

  3. 使用vuex实现全局状态管理

  • store:仓库,用来收集所有要用的数据
  • state:数据
  • getters:获取的方法
  • actions:触发的动作,一般是同步使用
  • mutations:异步触发动作,内部会去调用actions
  1. eventBus实现全局通信
    \(on:用来写触发函数,eventBus.\)on(事件, cb)
    \(emit:用来触发函数,eventBus.\)emit(事件,参数)

  2. \(parent和\)children

  3. $root

标签:触发,vue,间通信,使用,组件,eventBus,emit
From: https://www.cnblogs.com/taosifan/p/15494452.html

相关文章

  • Vue3 清空Reactive定义的数组
    shallowRef定义得数组清空letcomponent_list=shallowRef([{unit:Head,name:'Head',id:1},{unit:TopClass,name:'TopClass',id:2},])component_lis......
  • Transformers库之快速分词器组件
    目录快速分词器使用快速分词器模仿pipeline组件的行为序列标注任务抽取式问答任务快速分词器实际上,HuggingFace共提供了两种分分词器:慢速分词器:Transformers库自带,......
  • Zabbix 6 系列学习 08:组件分离式部署
    前面提到了很多的安装方式,本文来讲讲如果将LAMP拆开部署。本文环境Zabbix软件包分析zabbix-server-mysql:Zabbixserver主程序zabbix-web-mysql:Zabbix前端文件zabbix-ng......
  • FastAPI + Vue
    相当于这篇文章的翻译:https://testdriven.io/blog/developing-a-single-page-app-with-fastapi-and-vuejs/源码地址:https://github.com/testdrivenio/fastapi-vue一、后......
  • linux网络编程-进程间通信——信号
    信号是进程间通信的方式之一,进程之间通过发送和接收不同的值来通信,这些不同的值被标示为各种信号。我们使用kill指令杀死一个进程,本质上是kill这个程序给对应的进程发送了......
  • vue web 大文件上传源代码
    ​ 对于大文件的处理,无论是用户端还是服务端,如果一次性进行读取发送、接收都是不可取,很容易导致内存问题。所以对于大文件上传,采用切块分段上传,从上传的效率来看,利用多......
  • vuejs处理树状结构的数据扁平化
    1,有这样一个数据:1data=[2{3"id":1,4"name":"吃喝",5"parentId":0,6"children":[7......
  • vuejs实现一键复制功能
    1,首先安装插件:npminstallclipboard--sava2,在组件中应用 importClipboardfrom'clipboard'3,clipboard的实际使用1<!--第一种直接绑定在按钮上-->2<bu......
  • docker-compose入门以及部署SpringBoot+Vue+Redis+Mysql(前后端分离项目)以若依前后端
    场景若依前后端分离版手把手教你本地搭建环境并运行项目:https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662上面在搭建起来前后端分离版的项目后。......
  • vue pc放大镜效果
    html <divclass="choose"ref="choose"><divclass="content"ref="content"@mousemove="handleMove"......