美文网首页Vue
vue兄弟组件通信

vue兄弟组件通信

作者: Jony0114 | 来源:发表于2019-03-04 09:36 被阅读0次

一.第一种方式是子组件先传值给父组件,然后再通过父组件传给另一个子组件

二.第一步:借助中央事件总线:在外部新建一个js文件,取名Bus.js,可放在assets文件夹目录下

第二步:两个组件作为子组件被同一个父组件所引用,在同一个页面显示。

第三步:两个兄弟组件之间的语法

组件1需要定义一个发送数据的方法,此处sendMsg是定义在此的方法,页面点击时候触发此函数,函数主体,通过Bus中央事件总线用$emit发送一个send事件,事件的功能就是传送一个this.a++的数据,区分sendMsg和send,前者是当前页面的点击事件,后者是发送出去,需要其他组件监听的事件。

组件2在组件2事先定义一个变量,在生命周期为created的时候,通过Bus中央事件总线用$on监听组件1中发送的send事件,用一个带参数的回调函数,接收穿过来的值,参数即为传的值 ,把值赋值给当前组件的变量。

三.第二种的简化版,省略了外部的js文件,直接把总线放在main.js里的vue实例中,写法如图

第二步:在使用的时候,不需要引入外部文件,只需要在Bus前加this.$root,即可调用。

相关文章

  • vue 组件通信方式 ,父子、隔代、兄弟 三类通信,六种方法

    Vue 组件间通信只要指以下 3 类通信:父子组件通信、隔代组件通信、兄弟组件通信,下面分别介绍每种通信方式且会说...

  • Vue如何实现组件通信?

    Vue组件通信的三种情况: 父子通信 爷孙通信 兄弟通信 父子通信:父组件使用Prop向子组件传递数据,子组件通过...

  • Vue组件通信

    Vue组件通信 Vue组件关系可分为三大类: 父子组件 兄弟组件 跨级组件, 相应的组件之间的通信也分类三大类: ...

  • Vue组件通信

    总体来说,Vue中组件之间的通信场景如下图: 可以将其分为父子组件通信、兄弟组件通信、跨级组件通信。 1. 自定义...

  • vue2中eventbus遇到的坑

    前言 vue组件非常常见的有父子组件通信,兄弟组件通信。而父子组件通信就很简单,父组件会通过 props 向下传数...

  • Vue事件总线(EventBus)使用详细介绍

    前言 vue组件非常常见的有父子组件通信,兄弟组件通信。而父子组件通信就很简单,父组件会通过 props 向下传数...

  • Vue事件总线(EventBus)

    vue组件非常常见的有父子组件通信,兄弟组件通信。而父子组件通信就很简单,父组件会通过props向下传数据给子组件...

  • VUE - EventBus

    vue组件非常常见的有父子组件通信,兄弟组件通信。而父子组件通信就很简单,父组件会通过 props 向下传数据给子...

  • 老生常谈——vue组件之间通信

    老生常谈的组件之间通信 vue组件之间的通信细分为三种情况:兄弟组件之间的通信,父组件向子组件传递数据,子组件向父...

  • vue事件总线EventBus

    vue组件有父子组件通信:props兄弟组件通信:可以使用vuex,还可以使用事件总线eventBus 使用方法:...

网友评论

    本文标题:vue兄弟组件通信

    本文链接:https://www.haomeiwen.com/subject/weebrqtx.html