Vue实现非父子组件通信

Posted 2022-05-03 隔壁小王66

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等，分别对应数据，数据动态计算，同步方法，异步方法等，后续在讨论吧