首页 > 其他分享 >vue组件间的通讯的10种方法

vue组件间的通讯的10种方法

时间:2022-12-11 22:33:14浏览次数:57  
标签:10 vue blog 实例 csdn 组件 article net

https://blog.csdn.net/Serena_tz/article/details/124675515

 

1.props/$emit
props主要用于父组件传递数据给子组件,父==>子。


Vue自定义事件


父组件可以在使用子组件的地方直接用 v-on来监听子组件触发的事件 。即父组件中使用 v-on绑定自定义事件,然后在子组件中使用 $emit(eventName,data)触发事件
仅仅用于父子组件传递,不适用于 三层及其以上

2.消息订阅与发布(PubSubJS库)


3.插槽slot

 

 

用于父组件向子组件传递"标签数据"。也即子组件先有一个"占位符", 等待父组件传入具体的标签,子组件在进行渲染。
因为传递的具体的标签是在父组件,所以操作也应该放在父组件中。也就是说应该在父组件运行好之后传入子组件,其所有的操作应该在父组件中进行。

4.vuex状态管理

 


Vuex 核心
State:保存所有组件的共享状态
Getters:类似状态值的计算属性
Mutations:修改 State 中状态值的唯一方法,里面包含状态变化监听器和记录器
Actions:用于异步处理 State 中状态值,异步函数结束后调用Mutations
Modules:当一个 State 对象比较庞大时,可以将 State 分割成多个 Modules 模块。

5.全局事件总线


6. $parent / $children与 ref
ref / $refs
这种方式也是实现父子组件之间的通信
ref:这个属性用在子组件上,它的用用就指向了子组件的实例,可以通过实例来访问组件的数据和方法

$parent / $children
使用$parent可以让组件访问父组件的实例(访问的是上一级父组件的属性和方法)。
使用 $children 可以让组件访问子组件的实例,但是, $children 并不能保证顺序,并且访问的数据也不是响应式的。

7. 依赖注入(provide / inject)
这种方式就是vue中依赖注入,该方法用于 父子组件之间 的通信。当然这里所说的父子不一定是真正的父子,也可以是祖孙组件,在层数很深的情况下,可以使用这种方式来进行传值。就不用一层一层的传递数据了。
provide和inject是vue提供的两个钩子,和data、methods是同级的。并且provide的书写形式和data一样。
provide 钩子用来发送数据或方法。
inject钩子用来接收数据或方法

8. $attrs / $listeners
$attrs / $listeners 都是 vue 实例的 property。使用 $attrs / $listeners,实现父组件传递数据给子/孙组件。

$attrs:
包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind=“$attrs” 传入内部组件。通常配合 interitAttrs 选项一起使用。

$listeners:
包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on=“$listeners” 传入内部组件。

9.LocalStorage/SessionStorage
localStorage:存储持久数据,浏览器关闭后数据不丢失除非主动删除数据;
sessionStorage:数据在当前浏览器窗口关闭后自动删除

10.v-model语法糖(双向数据绑定)
父传子:
父组件:

在子组件里写v-model=“message”
1
子组件:

props:{
value:类型,
},
在data里调用这个value
1
2
3
4
子传父:
子组件:

函数绑定里写this.$emit(‘输入框,如input’,this.mymessage);
1
父组件:

v-model=“mymessage”
1
优点:使用时更加简洁
缺点:代码阅读难懂

总结
组件通信的几种方式

1、父子组件通信

2、兄弟组件通信

3、跨多层级组件通信

4、任意组件(vuex)

一、父与子孙通讯
props/emit;——父组件通过props传递数据给子组件,子组件通过$emit发送事件传递数据给父组件(单向数据流)
插槽slot;
$parent / $children与 ref——$parent / $children访问组件实例中的方法和数据; $ref放在组件上可以获取组件实例。通过 ref 属性给子组件设置一个名字。父组件通过$refs组件名来获得子组件,子组件通过 $parent 获得父组件,这样也可以实现通信
v-model——语法糖(双向数据绑定)
二、跨越层级通信
provide / inject——使用 provide/inject,在父组件中通过 provide提供变量,在子组件中通过inject来将变量注入到组件中。不论子组件有多深,只要调用了 inject 那么就可以注入 provide中的数据【无响应性且只能单向通信(父传子)】
$attrs / $listeners——具有响应性且可以双向通信
三、任意组件通讯
消息订阅与发布pubsub库
vuex状态管理——vuex 的思想就是将这一些公共的数据抽离出来,将它作为一个全局的变量来管理,然后其他组件就可以对这个公共数据进行读写操作,这样达到了解耦的目的
全局事件总线bus——利用eventBus总线实现,(实际上就是新建一个vue实例,用eventBus.$emit替代this.$emit,一样用v-on监听事件变化)【使用 eventBus 的方法,它的本质是通过创建一个空的 Vue 实例来作为消息传递的对象,通信的组件引入这个实例,通信的组件通过在这个实例上监听和触发事件,来实现消息的传递。】
LocalStorage/SessionStorage本地存储
参考
https://blog.csdn.net/m0_37564404/article/details/82466289
https://www.bilibili.com/video/BV1Zy4y1K7SH?p=96&spm_id_from=pageDriver
https://blog.csdn.net/zhoulu001/article/details/79548350
https://blog.csdn.net/jiangjunyuan168/article/details/122640925
https://blog.csdn.net/weixin_46215920/article/details/121345466
https://blog.csdn.net/weixin_57959437/article/details/117231687
https://blog.csdn.net/qq_37049128/article/details/107958184
https://blog.csdn.net/qinsangdilvzhi/article/details/106885953

标签:10,vue,blog,实例,csdn,组件,article,net
From: https://www.cnblogs.com/zhoading/p/16974740.html

相关文章

  • vue跨域问题
    例:浏览器在进行网络请求时 1.http :协议2.localhost:主机名3.8080:端口号 三者有一个不同,浏览器就会出现跨域问题 解决方法:proxyTable ......
  • Selenium10--查找一组元素
    find_element方法查找一个元素用find_element方法,返回一个webelement页面元素对象。""" 打开首页,关键字文本框反复输入,搜索后再次输入"""fromseleniumimportweb......
  • 机器学习100+问
    目录 ​​概述篇:​​​​1.      机器学习的发展历史上有哪些主要事件?​​​​2.      机器学习有哪些主要的流派?它们分别有什么贡献?​​​​3.     ......
  • 2022-2023-1 20221410《计算机基础与程序设计》课程总结
    第0周作业自我介绍第一周作业教材中的问题第二周作业计算机科学概论第1章并完成云班课测试《C语言程序设计》第1章并完成云班课测试第三周作业本周学习总结第四周......
  • 动态组件-缓存怎么做
    设置动态组件需要添加component组件定义形式<component:is='给定的组件名称'/>组件缓存:定义keep-alive组件即可;如果组件缓存了会有两个钩子钩子可以使用:activated:当它......
  • 全栈开发必备的10款Sublime Text 插件
    全栈开发必备的10款SublimeText插件SublimeText具有漂亮的用户界面和强大的功能,例如代码缩略图,多重选择,快捷命令等。SublimeText 更妙的是它的可扩展性。所以,这里......
  • 代码随想录算法训练营Day18|513. 找树左下角的值、112. 路径总和、106. 从中序与后序
    代码随想录算法训练营Day18|513.找树左下角的值、112.路径总和、106.从中序与后序遍历序列构造二叉树513.找树左下角的值513.找树左下角的值假设二叉树中至少有一......
  • 【Spring】10道不得不会的Spring面试题
    以下是Spring面试题,相信大家都会有种及眼熟又陌生的感觉、看过可能在短暂的面试后又马上忘记了。JavaPub在这里整理这些容易忘记的重点知识及解答,​​建议收藏,经常温习查......
  • oracle 10g中一个奇怪的定时bug
    最近遇到台机器很奇怪,oracle连接数正常,但好象隔了4-5个月的一天,就突然发现CPU基本是100%,HANG住了,但内存和连接数没上升,只有重新启动机器,后来......
  • vue无法获取flask设置的cookie
    最近在使用vue3开发基于flask后端的前后端分离项目时候,设置路由守卫时一直无法获取到登录后的cookie中session值但是在浏览器中却可以看到cookie先上代码router.befor......