非父子组件传值

非父子组件指的是兄弟组件或完全无关的两个组件

兄弟组件

兄弟组件可以通过父组件进行数据中转，简单来讲，A是父组件，BC是两个兄弟组，那么我们可以先B传给A，再A传给C。示例如图：

EventBus

当组件嵌套关系复杂时，根据组件关系传值会较为繁琐。组件为了数据中转，data中会存在许多与当前组件功能无关的数据。这时就需要使用EventBus。
EventBus（事件总线）是一个独立的事件中心，用于管理不同组件间的传值操作
EventBus通过一个新的Vue实例来管理组件传值操作，组件通过给实例注册事件，调用事件来实现数据传递：var bus = new Vue();
发送数据的组件触发bus事件，接收的组件给bus注册对应事件，示例如图：
给bus注册对应事件通过$on()操作，示例如图：
最后创建根实例执行代码即可

其他通信方式

$root

$root用于访问大年组件树根实例，设置简单的Vue应用时可以通过此方式进行组件传值，示例如图：
除了$root，Vue.js中还提供了$parent与$children用于便捷访问父子组件

$refs

用于获取设置了ref属性的HTML标签或子组件
给普通HTML标签设置ref属性，$refs可以获取DOM对象，示例如图：
给子组件设置ref属性，渲染后可通过$refs获取子组件实例，示例如图：

ok，组件通信就复习完了，后面是组价插槽的内容。今日份推荐歌曲：邰正宵-千纸鹤

Vue.js组件-组件通信-非父子组件传值以及其他通信方式相关推荐

初识 Vue（18）---（非父子组件间的传值）
非父子组件间的传值常一个应用会以一棵嵌套的组件树的形式来组织:将一个大组件进行拆分下图这种情况的组件间传值(父子组件间传值) 方法:父组件通过 Props 向子组件传值,子组件通过事件触发向父组件 ...
React组件通信-非父子组件间的通信
文章目录 React非父子组件通信小知识点的补充 Context应用场景 Context相关API Context使用流程 React非父子组件通信在React中, 非父子组件传递是通过一个API ...
Vue之非父子组件通信
Vue之非父子组件通信非父子组件传值方法: 1:在model中新建一个js文件引入Vue 实例化Vue 最后暴露相关实例 // 引入vue import Vue from 'vue' // 创建 ...
Vue组件化开发--组件通信方式-父传子、子传父、非父子组件传值
一.概述以脚手架搭建的Vue项目为笔记背景. 如果将所有的代码逻辑全部放到一个组件中,代码是非常的臃肿和难以维护的. 并且在真实开发中,可能会有更多的内容和代码逻辑,对于扩展性和可维护性来说都是非常 ...
vue学习【非父子组件传值问题（Bus/总线/观察者模式）】
如果两个组件是父子关系,就可以通过props的方式传值. 父组件通过props向子组件传值,子组件通过事件触发向父组件传值那么如果两个组件之间不具备父子关系,该如何传值呢?任何一个网页都可以拆分成几 ...
vue 2 使用 Bus.js 实现兄弟 (非父子) 组件通信简单案例
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. vue2中废弃了$dispatch和$broadcast广播和分发事件的方法.父子组件中可以用pro ...
Vue 非父子组件通信
前面的话在实际业务中,除了父子通信外,还有很多非父子组件通信的场景,非父子组件一般有两种,兄弟组件和跨多级组件.Vue.js 2.x中,使用一个空的Vue实例作为中央事件总线(bus). 中央事件总 ...
Vue非父子组件之间的通信
文章目录非父子组件的通信 1.Provide和Inject 1.1基本使用 1.2处理响应式数据(了解) 2.全局事件总线非父子组件的通信此篇讲解的是, 在学习状态管理之前, 非父子间通信的方案 ...
Vue非父子组件通信的几种方式
文章目录 1.provide和inject 1.1基本使用 1.2如何处理响应式数据 2.全局事件总线mitt库 2.1安装mitt库,封装eventbus.js工具类 2.2在其中一个组件中触发事件 ...

Vue.js组件-组件通信-非父子组件传值以及其他通信方式

非父子组件传值

兄弟组件

EventBus

其他通信方式

$root

$refs

Vue.js组件-组件通信-非父子组件传值以及其他通信方式相关推荐

最新文章

热门文章