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