problem description
1, two sibling components are introduced into a page. Show-relation and echart-line, communicate values and events through bus.
first of all: there is an input, in show-relation to enter a word, the onblur event sends the request, and the server returns a set of data through bus.$emit ("sendData", arr) to the echart-line component
) then: echart-line is used to display the data in echarts chart, click on one of the words, Pass the word to the show-realtion component, call the method to send the request, and the server returns the relevant data again. Repeat the previous process
the environmental background of the problems and what methods you have tried
I use eventBus to communicate
related codes
/ / Please paste the code text below (do not replace the code with pictures)
/ / vue-happy-bus.js
import Vue$ from "vue"
let Vue = Vue$
if (typeof window !== "undefined" && window.Vue) {
Vue = window.Vue
}
//
const EventStore = {}
const Bus = new Vue()
//
const destroyHandler = function() {
// this vue
const currentEventObj = EventStore[this._uid]
if (typeof currentEventObj === "undefined") {
return
}
for (let type in currentEventObj) {
const key = Array.isArray(type) ? type.join(",") : type
// Bus
Bus.$off(type, currentEventObj[key])
}
//
delete EventStore[this._uid]
}
const BusFactory = vm => {
// destroyed
const destroyed = vm.$options.destroyed
// (vueID)
const uid = vm._uid
//
EventStore[uid] = {}
// destroyed
!destroyed.includes(destroyHandler) && destroyed.push(destroyHandler)
return {
$on: (type, handler) => {
const key = Array.isArray(type) ? type.join(",") : type
EventStore[uid][key] = handler
Bus.$on(type, handler)
},
$off: (type, handler) => {
// $off() type
if (!type) {
// uid
delete EventStore[uid]
Bus.$off()
return
}
const key = Array.isArray(type) ? type.join(",") : type
//
delete EventStore[uid][key]
Bus.$off(type, handler)
},
$once: (...params) => Bus.$once(...params),
$emit: (...params) => Bus.$emit(...params)
}
}
BusFactory.$emit = (...params) => Bus.$emit(...params)
BusFactory.$once = (...params) => Bus.$once(...params)
export default BusFactory/ / show-relation.vue
<input @blur="getSerValue(value)" v-model="value" :placeholder="expValue.msg" />
import axios from "axios"
import BusFactory from "@/util/vue-happy-bus"
data() {
return {
Bus: BusFactory(this),// BusFactorythis bus
res:"", //
value: "", //textarea
}
},
mounted() {
this.Bus.$on("changeCenter", v => {
console.log("")
this.value =v
this.getSerValue(v)
})
},
beforeDestroy() {
console.log("show-relation");
Bus.$off("changeCenter")
},
methods: {
getSerValue(val) {
let me = this;
if(val){
me.Bus.$emit("sendInputValue", val)
axios.get(me.expValue.tradeUrl)
.then(function (response) {
me.res = response.data.body;
if(me.res){
me.Bus.$emit("sendData", me.res)//
}
})
.catch(function (error){
me.newValue = error;
});
}else{
me.expValue.msg = ", !";
}
}
}/ / echart-line.vue
<div class="echart-line">
<div class="box">
<div class="main" ref="main"></div>
</div>
</div>
</template>
<script>
import echarts from "echarts"
import BusFactory from "@/util/vue-happy-bus"
export default {
name: "echart-line",
data() {
return {
Bus: BusFactory(this),// BusFactorythis bus
inputValue: ""
}
},
mounted() {
let me = this;
me.Bus.$on("sendData", v => {
me.drawPic(v)
});
me.Bus.$on("sendInputValue", v=>{
me.inputValue = v;
console.log(v);
})
},
methods: {
drawPic(dataArray) {
let me = this;
let personArr = [];
let linksArr = [];
let dataObjs = [];//data
let linkObjs = [];//links
dataArray.forEach(v => {
if(v.name != me.inputValue){
personArr.push(v.name);
linksArr.push(v.value);
}
});
let centerData = {//
name: me.inputValue,
symbolSize: 100,
itemStyle: {
normal: {
color: "blue"
}
}
};
dataObjs.push(centerData);//data
personArr.forEach(v => {
let dataObj = { //
name: v,
symbolSize: 50,
itemStyle: {
normal: {
color: "green"
}
}
};
dataObjs.push(dataObj);
});
linksArr.forEach(n=>{
dataArray.forEach(m=>{
if(n === m.value){
let linkObj = {
source: m.name,
target: this.inputValue,
name: n,
lineStyle: {
normal: {
type: "dotted",
color: "blue"
}
}
}
linkObjs.push(linkObj)
}
})
})
console.log(dataObjs)
console.log(linkObjs)
//
let myChart = echarts.init(this.$refs.main);
let option = {
title: {
text: ""
},
tooltip: {
formatter: function(x) {
return x.data.des;
}
},
series: [{
type: "graph", //
layout: "force",
symbol: "circle", //"circle", "rect", "roundRect", "triangle", "diamond", "pin", "arrow"
symbolSize: 50, //
roam: true, //
edgeSymbol: ["circle", "arrow"], //
edgeSymbolSize: [4, 10],
// focusNodeAdjacency: true, //
// repulsion: 8000, //
edgeLabel: {
normal: {
textStyle: {
fontSize: 10,
backgroundColor: "-sharpfff"
}
}
},
force: {
repulsion: 1500,
edgeLength: [10, 100]
},
draggable: false,
itemStyle: {
normal: {
color: "blue",
}
},
lineStyle: {
normal: {
width: 2,
color: "blue"
}
},
edgeLabel: {
normal: {
show: false,
formatter: function(x) {
return x.data.name;
}
}
},
label: {
normal: {
show: true,
textStyle: {}
}
},
data: dataObjs,
links: linkObjs,
}]
};
myChart.setOption(option);
myChart.on("click", function(params) {
let me = this;
let name = params.name;
console.log("")
BusFactory.$emit("changeCenter", name)
BusFactory.$off("changeCenter")
});
}
},
beforeUpdate() {
bus.$off()
},
}
</script>what result do you expect? What is the error message actually seen?
before, because the bus event was not destroyed with BusFactory.$off (), it was repeated many times. The use here reported an error when destroying it. Ask the great god to solve the problem. The bus.js is written by the great god on the Internet. If there is any infringement, please contact me directly