Vue同级组件数据传递

最近工作中遇到朋友问我Vue同级兄弟组件怎么传递数据和接收数据，平时大量用到的都是父组件和子组件传递数据，于是查了一下资料，自己写了个简单的Deom，算是了解学习了这个知识点。

1、用到的文件说明：

demo.vue、eventBus.js、first.vue、second.vue

文件关系说明：first.vue、second.vue作为组件放到demo.vue中，first.vue、second.vue是两个平级兄弟页面作为组件嵌入到demo.vue中，下文有说明。

1.1、功能点如图所示：

ps：当点击组件一的按钮，把数据传送给组件二，组件二接收到内容后，把红色文字替换掉

2、同级组件不能直接传值，需要一个中间桥梁，这里我们定义个中间桥梁js文件,命名为eventBus.js

2.1、代码如下：

2.2、demo.vue 页面代码如下

demo.vue 主要是引入了first.vue 与 second.vue 两个页面当做组件。

2.3、first.vue 页面代码如下

引入 eventBus.js，$emit触发方法【userDefinedEvent】，这个方法是自定义的，组件二接收的时候也用这个方法即可。

2.4、second.vue 页面代码如下

引入 eventBus.js，$on接收【userDefinedEvent】方法传过来的回调参数。

点击按钮，页面效果如下

红色文字已经修改成我们传递过来的值。

一般大型的项目，推荐使用Vuex来管理组件之间的通信

Vue同级组件数据传递相关推荐

七十、Vue城市页面Ajax动态渲染和兄弟组件数据传递
2020/10/29. 周四.今天又是奋斗的一天. @Author:Runsen 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的.大四弃算法转前端,需要每天的 ...
vue.js 组件之间传递数据 1
vue.js 组件之间传递数据框架浏览数:437 2017-8-21 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.如何传递数据 ...
vue 同页面不同组件数据传递
不用 vuex 同页面不同组件数据传递,用vuex的这篇文章可以忽略! 直接举例: 一个页面有两个组件,其中组件A的数据可以传递到组件B,同理组件B的数据可以传递到组件A, 即AB两个组件可以互相传递 ...
组件、局部的组件、表行组件、组件数据传递
组件:基础的基础知识点组件(Component,Portlet) 组件组件就是页面上的一小块区域内容,完成一个小的页面功能,请参照视频第六课. 综合例 <div id="myAp ...
Vue中组件数据的传递
Vue中组件的作用域是隔离的,父组件中的数值子组件看不到!也就是说,用angular作比喻,组件的scope天生是scope:()的! 如果父组件需要往子组件中传数据,此时应该使用标签属性: < ...
vue.js 组件之间传递数据
前言组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.如何传递数据也成了组件的重要知识点之一. 组件组件与组件之间,还存在着不同的关 ...
Vue表单类的父子组件数据传递示例_vue.js_脚本之家
使用Vue.js进行项目开发,那必然会使用基于组件的开发方式,这种方式的确给开发和维护带来的一定的便利性,但如果涉及到组件之间的数据与状态传递交互,就是一件麻烦事了,特别是面对有一大堆表单的页面. 在 ...
vue父组件变量传递子组件_Vue.js 父组件向子组件传递数据通过 props
我的使用场景:父组件:home.vue 子组件:feed-section.vue 父组件 home.vue 通过请求拿到数据后,传递给子组件 feed-section.vue:因为在子组件中需要渲染 ...
SwiftUI 跨组件数据传递
Python实战社群 Java实战社群长按识别下方二维码,按需求添加扫码关注添加客服进Python社群▲ 扫码关注添加客服进Java社群▲ 作者: Cyandev, iOS 和 MacOS 开 ...
react中父子组件数据传递，子组件之间的数据传递
首先有三个js文件,index.js(父组件) baseForm.js(子组件) etable.js(子组件) 在index.js中定义一个arr数组,传给BaseForm组件 import Reac ...

Vue同级组件数据传递

Vue同级组件数据传递相关推荐

最新文章

热门文章