Vue实现非父子组件通信

Posted 隔壁小王66

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue实现非父子组件通信相关的知识,希望对你有一定的参考价值。

Vue非父子组件传值

这种情况,就需要自己定义一个eventbus,如下

1.自己定义bus,新建一个eventbus.js文件

import Vue from 'vue';
var bus = new Vue();
export default bus

2.在非父子组件导入

import bus from "../eventbus.js";

类似子组件向父组件传值,定一个方法,利用emit

   emitOne() 
      bus.$emit("to_two", 111);
    ,

这里的区别是,子组件用的this,这里用的是eventbus.js导入的对象,而不是自身的对象

在mounted钩子方法中

 mounted() 
    console.log('mounted');
    bus.$on("to_one", val => 
      this.msg = val;
        console.log('组件1接收: '+this.msg);
    );
  ,

利用bus.$on来设置要监听的方法,通过它获取值

对于简单的组件间传值可以利用一个公共的js来操作,更复杂的状态管理通过vuex来实现,vuex定义了state,getter,mutations,actions等,分别对应数据,数据动态计算,同步方法,异步方法等,后续在讨论吧

以上是关于Vue实现非父子组件通信的主要内容,如果未能解决你的问题,请参考以下文章

Vue中的Bus(总线)实现非父子组件通信

Vue父子组件及非父子组件如何通信

Vue组件通信之非父子组件传值

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

vue2.0父子组件以及非父子组件通信

vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例