Vue.JS快速上手(组件间的通信)
2024-10-20 17:26:27
前言
Vue采用的是组件化思想,那么这些组件间是如何通信的呢?下面详细介绍一下。
所谓组件间通信,不单单是我们字面上理解的相互传递数据,这里还包括一个组件访问另一个组件的实例方法等,如父组件通过ref访问子组件实例成员,并实现传参。我们先来研究父子组件间是如何通信的。
一、父子组件通信
1. props实现父组件向子组件传递数据
父组件:
子组件:
2. $emit实现子组件向父组件传递数据
父组件:
子组件:
3.父组件通过ref访问子组件实例成员,并实现传参
父组件:
子组件:
总结一下,如果是数据传递的话:
父->子: props; 子->父: $emit
父组件通过ref访问子组件实例成员,并实现传参
二、兄弟组件间传递
什么是兄弟组件,也就是一个父组件下的多个子组件,他们之间如何实现数据传递呢?
1:通过父组件中介,进行数据传递
父组件:
子组件A:
子组件B:
2: 通过$parent访问父组件数据
父组件:
子组件A:
子组件B:
注意:A组件通过$emit传过来的值,在父组件定义后可以直接使用
3.总线模式(bus): 监听与订阅(事件)
1.在main.js添加vue类型原型属性, 使得所有vue实例(组件)都可以通过this来访问bus对象
2.谁调用谁就触发事件,将值往下传,下面的子子孙孙都可以通过$on接收
3.子组件监听Vue上的bus对象after-change,实现接收
三、陌生组件间数据传递
方案1:通过$root获取根组件实例
方案2:通过在Vue.prototype添加响应式对象
结尾
以上就是常用的组件通信方法,不过日常开发还是Vuex用的多一点,Vuex真正实现了共享数据,但这并不意味着Vuex就天下无敌了,要实现组件封装还是要用基本的方法来实现。
最新文章
- Spring学习(三)
- XPath使用小结
- SQL存储过程来调用webservice
- Java观察者模式(Observer模式)
- HDU 4160
- VIM的配置文件(vimrc)在哪里?【Win7】
- iOS中谓词的使用
- html5中的video标签和audio标签
- Spring声明式事务总结
- C# 添加枚举中文资源
- 简单的连接数据库的java程序模板
- mysql 开发进阶篇系列 14 锁问题(避免死锁,死锁查看分析)
- jquery.$.ajax简单的使用
- LeetCode(68):文本左右对齐
- cf869C组合计数问题
- oracle addm报告
- 【android】android 常用adb 和 adb shell 命令
- posix 条件变量与互斥锁 示例生产者--消费者问题
- Alpha发布——美工+文案展示博客
- keystone 命令简要说明
热门文章
- PAT乙级:1084 外观数列 (20分)
- ThreadLocal(十一)
- ASM入网小助手卸载
- Qt 5.2中编译加载MySQL数据库驱动问题的总结
- Drupal <; 7.32 “Drupalgeddon” SQL注入漏洞(CVE-2014-3704)
- MySQL Shell import_table数据导入
- ASPX页面传参中文乱码处理
- C作用域
- 干了六年Android开发现在裸辞失业了,再过2个月就30了,该怎么继续生活?
- OpenStack中VNC协议实现多屏共享(多屏不踢访问)