首页 > 其他分享 >组件通信的方式

组件通信的方式

时间:2023-01-25 19:56:16浏览次数:37  
标签:方式 通信 传递数据 组件 EventBus emit store

Vue组件的通信方式分为两大类,一类是父子组件通信,另一类是任何关系类型组件通信(父子、兄弟、非兄弟) 父子组件的通信方式: 父给子传递数据,通过给子组件添加自定义属性,比如:,list是父组件给子组件传递的数据。子获取父的数据,在子组件中使用props属性获取 子给父传递数据,通过给子组件传递父组件的方法,子组件调用父组件的方法传递数据,比如: ,deleteHandler就是父组件的函数,在子组件中通过this.$emit('方法名',参数),调用父组件的方法,并把数据传递到父组件。 props是只读,不可以被修改,所有被修改都会失效和被警告 任何关系类型组件通信(父子、兄弟、非兄弟)方式: EventBus: 使用方法是创建一个新的Vue实例,需要通信的组件都引入该Vue实例,传递数据的组件使用 event.$emit('名称',参数)发送数据,接收数据的组件使用 event.$on('名称',方法)接收数据。 VueX: 集中管理项目公共数据,Vuex 的状态存储是响应式的,当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。 加分回答 EventBus的优缺点,缺点vue是单页应用,如果你在某一个页面刷新了之后,与之相关的EventBus会被移除,这样就导致业务走不下去。同时如果页面中有反复操作的业务,EventBus在监听的时候就会触发很多次,需要好好处理EventBus在项目中的关系。在vue页面销毁时,同时移除EventBus事件监听。优点,解决了多层组件之间繁琐的事件传播,使用原理十分简单,代码量少。适合业简单,组件传递数据较少的项目,大型项目业务复杂的还是尽量使用VueX

1、父子组件通信常用props和$emit还有$refs;2、兄弟组件通信常用定义的公共事件bus的$on、$emit;3、祖先和子孙组件通信常用$attrs和$listener、provide和inject;4、复杂通信常用vuex

标签:方式,通信,传递数据,组件,EventBus,emit,store
From: https://www.cnblogs.com/jycom/p/17067203.html

相关文章

  • 有什么方法可以保持前后端实时通信
    重排:当DOM的变化影响了元素的几何信息(元素的的位置和尺寸大小),浏览器需要重新计算元素的几何属性,将其安放在界面中的正确位置,这个过程叫做重排。重绘:当一个元素的外观发......
  • 节约内存的编程方式
    以图形用户界面(GUI,GraphicalUserInterface)为基础的Windows,可以说是一个巨大的操作系统。Windows的前身是MS-DOS操作系统,最初版本可以在128KB左右的内存上运行,而想要W......
  • ASP.NET2.0运行时提示:以一种访问权限不允许的方式做了一个访问套接字的尝试
    在调试ASP.NET的时候常出现如下错误错误消息框:   未能开始侦听端口xxxxx以一种访问权限不允许的方式做了一个访问套接字的尝试解决方法:找到该项目的sln......
  • 使用Knative事件驱动组件解耦服务依赖
    1部署一个Knative事件驱动应用通过以下9个步骤完成一个完整的Knative事件驱动应用的部署与验证。1)下载官方示例代码:$gitclone-b"release-0.16"https://github.com/......
  • 使用Knative的服务管理组件管理应用
    在部署一个KnativeService之前,先了解一下它的部署模型和对应的Kubernetes资源。如下所示,在部署KnativeServingService的过程中,KnativeServing控制器将创建configurati......
  • Knative的事件驱动组件Eventing
    KnativeEventing是Knative平台的通用事件驱动组件,它实现了云原生应用开发对事件驱动的通用需求,同时还提供了一组可组合的原语,实现了事件源和消费者之间的延迟绑定。Knati......
  • Knative的服务管理组件Serving
    Knative的服务管理组件Serving是管理应用服务的理想选择,它通过自动缩容为零和基于HTTP负载自动扩展的方式简化了部署流程。Knative平台可管理应用服务的部署、版本、网络、......
  • Tekton组件及资源对象
    Tekton由如下7个组件构成1)TektonPipeline:TektonPipeline是Tekton的基础组件,定义了一组Kubernetes自定义资源。作为构建模块的基础,你可以使用它们装配CI/CD流水线。2)Tek......
  • mybatis添加mapper映射文件的四种方式
    一、绝对路径引入(不推荐使用)<!--1.绝对路径引入--><mapperurl="file:\\\D:\stsbundle\workplace\mybatis_demo\src\main\resources\mapper\UserMapper.xml"/>二......
  • 云边协同CloudCore组件
    CloudCore架构CloudCore通过List/Watch的方式与云交互,将监听到的事件下发到边缘,同时负责接收边缘以事件的形式上报的状态数据。这些功能是由CloudCore中的不同模块完成的......