目录1. 父传子2. 子传父3. 非父子组件传值4. Vuex5. refs6. $children7. $parent8. provide & inject9. $attr
说起组件通信,可能大家耳熟能详的有以下5种:
父组件通过自定义属性给子组件传值,子组件用props接收
父组件在子组件标签上自定义事件,子组件通过$emit来触发自定义事件,并且可以传递参数
eventBus事件总线:
可通过eventBus进行信息的发布与订阅(创造一个都能访问到的事件总线)
vuex是专为vue.js应用程序开发的状态管理模式,它采用集中式存储管理程序的所有组件的状态,解决多组件通信。不过多用于中大型项目,小型项目用它会显得臃肿。
通过添加ref和·$refs·配合,也可以很方便的获取子组件,访问调用子组件的属性和方法
关于refs,我还另外单独写过一篇详细用法的,refs的用法
除开以上5种,还有5种不那么常见的组件通信方法:
父组件中·$children·返回的是一个组件集合,如果清楚知道子组件的顺序,也可以使用下标操作
子组件中this.$parent
指向父组件,子组件无法直接修改父组件中的数据,可以通过this.$parent让父组件自己去改
例如:
this.$parent.xxx=200
this.$parent.fn()
成对出现:provide和inject是成对出现的
作用:用于父组件向子孙组件传递数据
使用方法:
用于父组件给孙组件传递数据
用于孙组件给父组件传递数据
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注编程网的更多内容!
--结束END--
本文标题: vue组件通信的多种方法详解
本文链接: https://www.lsjlt.com/news/157395.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0