资讯专栏INFORMATION COLUMN

Vue 之兄弟组件通信

CntChen / 2835人阅读

摘要:如何把兄弟组件的内容传给兄弟组件例如把子兄弟组件的说的话传给兄弟组件并在兄弟组件上显示思路创建用来接收和发送事件组件在被点击时发送事件至组件在时监听事件,当事件触发时调用处理函数处理函数把组件发送过来的数据在组件内展示

如何把兄弟组件 1 的内容传给 兄弟组件 2 ?

例如
把子兄弟组件 1 的说的话传给兄弟组件 2 并在兄弟组件 2 上显示

思路
创建 eventHub 用来接收和发送事件
组件 1 在 被点击时发送事件至 eventHub
组件 2 在 created 时监听事件,当事件触发时调用处理函数
处理函数把组件 1 发送过来的数据在组件 2 内展示



  
    
    
    
  
  
    

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/103624.html

相关文章

  • Vue组件通信

    摘要:使,最主要的的是跨组件通信全局数据维护。这两种法旦发出事件后,任何组件都是可以接收到的,就近原则,且会在第次接收到后停冒泡,除返回。并且和也没有解决兄弟组件间的通信问题。 Vue的组件是其非常重要的系统,组件之间的通信也是开发中不可避免的需求 一般来说Vue组件是以下几种关系 showImg(https://segmentfault.com/img/bVbrrTY); A组件和B组件、...

    philadelphia 评论0 收藏0
  • vuejs组件通信精髓归纳

    摘要:组件的通信和和内置的通信手段一般有两种给元素或组件注册引用信息访问父子实例。有时候两个组件之间需要进行通信,但是它们彼此不是父子组件的关系。详情可参考参考组件之间种组件通信方式总结参考参考 组件的分类 常规页面组件,由 vue-router 产生的每个页面,它本质上也是一个组件(.vue),主要承载当前页面的 HTML 结构,会包含数据获取、数据整理、数据可视化等常规业务。 功能性抽...

    妤锋シ 评论0 收藏0
  • vue中8种组件通信方式, 值得收藏!

    摘要:一父组件通过的方式向子组件传递数据,而通过子组件可以向父组件通信。而且只读,不可被修改,所有修改都会失效并警告。 之前写了一篇关于vue面试总结的文章, 有不少网友提出组件之间通信方式还有很多, 这篇文章便是专门总结组件之间通信的 vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢?首先我们需要知道在vue中组件之间存在什么样...

    BicycleWarrior 评论0 收藏0
  • vue组件通信全面总结

    摘要:当一个组件没有声明任何时,这里会包含所有父作用域的绑定和除外,并且可以通过传入内部组件在创建高级别的组件时非常有用。 写在前面 组件间的通信是是实际开发中非常常用的一环,如何使用对项目整体设计、开发、规范都有很实际的的作用,我在项目开发中对此深有体会,总结下vue组件间通信的几种方式,讨论下各自的使用场景 文章对相关场景预览 父->子组件间的数据传递 子->父组件间的数据传递 兄弟...

    余学文 评论0 收藏0
  • Vue项目总结】组件通信处理方案

    摘要:组件之间的通信是我们在项目中常常碰到的,而选择合适的通信方式尤为重要,这里总结下作者在实际项目中所运用到的通信方案,如有遗漏,请大家见谅。示例效果如下兄弟组件同级别组件相互间的通信,我们可以使用或着。 Vue组件之间的通信是我们在项目中常常碰到的,而选择合适的通信方式尤为重要,这里总结下作者在实际项目中所运用到的通信方案,如有遗漏,请大家见谅。文章代码具体见DEMO;文章首发于imon...

    TerryCai 评论0 收藏0

发表评论

0条评论

CntChen

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<