// 注册一个空的js,作为中转站
bus.js
import Vue from 'vue'
export default new Vue()
A组件:
非父子组件之间传值,需要定义个公共的公共实例文件bus.js,
作为中间仓库来传值,不然路由组件之间达不到传值的效果。
$emit发送事件
<template>
<div @click="eleValue">点击向非父子组件传值</div>
</template>
<script>
// 非父子组件之间传值,需要定义个公共的公共实例文件bus.js,
// 作为中间仓库来传值,不然路由组件之间达不到传值的效果。
// 引入中转站
import Bus from './common/bus.js'
export default {
name: "",
data() {
return {
elementVa:'这是要传的值'
};
},
methods: {
eleValue(){
// $emit 发送事件
Bus.$emit('value',this.elementVa)
this.$router.push({
path:'/acom'
})
}
},
computed:{
},
mounted(){
}
};
</script>
<style scoped>
</style>
B组件:
我们可以这样操作。也是需要 先引入那个‘中转站’eventBus.然后接收事件。
注意此操作是在mounted(){}这个生命周期里进行的。
$on监听 接受传过来的值
<template>
<div>接受传过来的值:{{sendVlaue}}</div>
</template>
<script>
// 引入中转站
import Bus from "./common/bus.js";
export default {
name: "",
data() {
return {
sendVlaue: ""
};
},
// 我们可以这样操作。也是需要 先引入那个‘中转站’eventBus.然后接收事件。
// 注意此操作是在mounted(){}这个生命周期里进行的。
mounted() {
let _this = this;
// $on 监听,接受传过来的值
Bus.$on("value", data => {
console.log(data);
_this.sendVlaue = data;
console.log(_this.sendVlaue); //接受传过来的值
});
}
};
</script>
<style scoped>
</style>