美文网首页
vue组件通信,中央事件总线

vue组件通信,中央事件总线

作者: lyn911 | 来源:发表于2017-11-20 13:56 被阅读0次

vue 组件通信分为父组件与子组件通信、子组件与父组件通信、非父子关系组件通信三种

第一种大家都知道用props,引用子组件的时候定义个自定义属性,然后在子组件使用props接收

父组件 子组件

比如 addfolder是一个子组件 ,需要传递一个参数bucketId,(其他的可忽略),bucketId可在data()定义,父子组件的写法如图所示

第二种子组件与父组件通信,可通过触发事件来实现,个人理解类似于回调

父组件 父组件 子组件

比如tree为一个子组件,showtree为父组件的一个变量,那么要在子组件里修改父组件变量的值,传一个自定义事件 showtreebox,在子组件用$emit的方式 触发事件并传过来参数值,就可以改变父组件的变量值了

第三种就是兄弟组件或者没有逻辑关系的组件直接通信了,这时候就需要一个中转站了

新建一个js文件比如命名为eventbus.js,创建一个事件中心

事件总线

然后在需要通信的组件引入这个文件

接收的组件注册一个事件,名字为getTreeData ,这个事件执行一个组件内的方法 getTree()

接收的组件

在另外的组件触发getTreeData事件就可以执行了

触发的组件

相关文章

  • vue组件通信,中央事件总线

    vue 组件通信分为父组件与子组件通信、子组件与父组件通信、非父子关系组件通信三种 第一种大家都知道用props,...

  • 非父子组件间的通信

    非父子组件间的通信,可以通过一个空的Vue实例作为中央事件总线(事件中心),用它来触发事件和监听事件

  • eventBus封装

    中央事件总线eventBus的实质就是创建一个vue实例,通过一个空的vue实例作为桥梁实现vue组件间的通信。它...

  • 2019-02-14 vue组件基础篇3

    非父子组件通信 1.使用一个空的Vue实例作为中央事件总线(bus)2.bus.$emit('key', 'tex...

  • 非父子组件间通信

    上一篇:父子组件间单向数据流的解决办法 非父子组件之间的通信,可以通过一个空的 Vue 实例作为中央事件总线(事件...

  • vue事件总线EventBus

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

  • 22.Vue全局事件总线(GlobalEventBus)

    一种组件间通信的方式,适用于任意组件间通信 安装全局事件总线:new Vue({ ...... beforeCre...

  • vue组件之非父子组件通信

    关键词:通信 有时候非父子关系的组件也需要通信。在简单的场景下,使用一个空的 Vue 实例作为中央事件总线: 实例

  • 全局事件总线

    1.一种组件间通信方式,适用于任意组件间通信2.安装全局事件总线new Vue({...beforeCreate ...

  • Vue中非父组件通信(中央事件总线)

    全局注册的组件: 1、新建一个名为bus的vue实例,作为通信的媒介。2、新建两个组件,one 和 two。3、o...

网友评论

      本文标题:vue组件通信,中央事件总线

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