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实现非父子组件通信的主要内容,如果未能解决你的问题,请参考以下文章