vue之非父子组件通信实现方式
在开发中,我们构建了组件树之后,除了父子组件之间的通信之外,还会有非父子组件之间的通信。这里主要讲两种方式:
- Provide/Inject
- Mitt全局事件总线
1、Provide和Inject
应用场景
比如有一些深度嵌套的组件,子组件想要获取父组件的部分内容,在这种情况下,如果我们仍然将props沿着组件链逐级传递下去,就会非常的麻烦。
对于这种情况下,我们可以使用 Provide和Inject,它可以实现非父子组件之间共享数据。
特点
- 无论层级结构有多深,父组件都可以作为其所有子组件(包括子孙)的依赖提供者。
- 父组件有一个provide选项来提供数据。
- 子组件有一个 inject 选项来使用数据。
基本使用
我们编写如下一个组件结构:
注:不能在定义provide属性的当前组件使用provide提供的数据,兄弟组件也不行。
踩坑
上图中的this指向谁?能不能访问到data里names的长度?为什么?
tips:在这script标签包裹的一段export代码属于一个模块作用域,此时this为undefined。
解决方法是改写provide为函数形式并返回一个对象(像组件里data一样)。
处理响应式数据
另外如果我们修改了this.names的内容,那么使用length的子组件会不会也发生相应的改变呢?
答案是否定的,因为length不是响应式数据(类似值拷贝)。 所以我们可以使用一些响应式的一些API来完成这些功能,比如说computed函数(vue3语法)。
注:因为 computed返回的是一个ref对象 ,需要手动通过.value形式获取其中真正的值 。
全局事件总线
安装
npm install mitt
基本使用
import mitt from 'mitt';const emitter = mitt();
// 可以创建多个
// export const emitter1 = mitt();
// export const emitter2 = mitt();
// export const emitter3 = mitt();export default emitter;
个人感觉这个api和socket很相像。
关闭监听
vue之非父子组件通信实现方式相关推荐
- Vue之非父子组件通信
Vue之非父子组件通信 非父子组件传值方法: 1:在model中新建一个js文件 引入Vue 实例化Vue 最后暴露相关实例 // 引入vue import Vue from 'vue' // 创建 ...
- Vue 非父子组件通信方案
Vue 非父子组件通信方案 概述 在 Vue 中模块间的通信很普遍 如果是单纯的父子组件间传递信息,父组件可以使用 props 将数据向下传递到子组件,而在子组件中可以使用 events (父组件需要 ...
- vue父子组件通信以及非父子组件通信的方法
组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系,父子关系.兄弟关系和隔代关系,简化点可以分为父子关系和 ...
- VUE非父子组件通信
非父子组件通信 vue非父子组件传值方式,本文章整理了两种方式:vuex和总线bus.vuex相比于总线bus来说非常的稳定,推荐直接使用vuex. 我看其他的文章基本上是[点击导航栏回退的时候,去获 ...
- Vue 非父子组件通信
前面的话 在实际业务中,除了父子通信外,还有很多非父子组件通信的场景,非父子组件一般有两种,兄弟组件和跨多级组件.Vue.js 2.x中,使用一个空的Vue实例作为中央事件总线(bus). 中央事件总 ...
- Vue 非父子组件通信 (ref)
Vue 非父子组件通信 (ref) 流程:1. 先在son子组件中定义一个数据和事件处理程序data( ) { return { flag: false }} , methods: { cry( ) ...
- VUE非父子组件通信Bus——公交车踩坑笔记
抛开父子组件的通讯,对于非父子组件通信,简单的数据交互,使用Bus是非常不错的. 遇到的坑有两个. 1.两个组件的信息交互代码写在哪个生命周期函数中,如果只是点击组件A标签触发函数,然后向界面B传递参 ...
- 子组件调用父组件方法_vue父子组件通信以及非父子组件通信的方法
组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系,父子关系.兄弟关系和隔代关系,简化点可以分为父子关系和 ...
- Vue 3.0父子组件通信
在Vue 3.0 发布以后,我们基于新的特性,来归纳一下父子组件通信的方式.并且检验一下Vue 2.0中常用的通信方式,如何在Vue 3.0中使用.本文列出了三种常用的通信方式: 子组件通过emit函 ...
最新文章
- WCF学习笔记(基于REST规则方式)
- cookie自动登录
- clion浏览linux代码,手把手教你使用 Clion 开发 Linux C++ 项目
- thinkphp字符截取函数msubstr()
- Java中return的用法
- 哈,我再xp Professional上安装SqlServer2005桌面管理器
- 移动互联网初创型团队需要什么样的云计算服务?
- java 判断文章的重复率_如何统计文件重复率
- 给临时停车号码牌插上翅膀:lua脚本语言加入—鲁哇客智能挪车号码牌技术升级之路
- Java基础:说说Java
- 苹果消息推送服务教程:第2部分(共2部分)
- proc near/far
- 中国标准时间、2021-01-11T09:49:43.000+0000等各种时间的转换、各种时间处理
- 管理学博士申请考核经验分享——信息收集篇
- 产品读书《极简管理法则》
- “千元机皇” realme真我Q3系列发布 越级体验999元起
- oracle数据库进程pmon,【案例】Oracle进程异常 pmon和LISTENER进程负载均比较高的解决办法...
- JavaWeb SSM 《精品毕设》在线考试系统平台(教师端 + 学生端) 前台 + 后台(源码 + 论文)主要实现登录、注册、试卷管理、题目管理、学科管理、考生答卷、任务试卷、固定试卷、错题本等功能
- SqlSugar的使用
- 【IoT】NFC CPU 卡 AID 应用标识符规范
热门文章
- 什么是Solr,适合什么场景?Solr的基本介绍
- PPT转成Word文档的四种方法
- iOS 对https App内部的http请求进行白名单设置
- Anaconda:The environment is inconsistent, please check the package plan carefully的解决办法
- 20--西西弗斯神话
- ABAP中 delete 语句的使用
- 使用docker中容器的坑
- 怎么修改sqlserver用户密码_新版tplink路由器怎么修改管理员登录密码【修改方法】...
- oracle导入半个汉字的问题
- AI 时代竟有智能化鸿沟,具备哪些条件才能跨过?