Table.vue 中的 loads 函数,每次执行时 counts() 函数更新 ac 变量的值,并定义触发 exchange 事件。
loads(){ this.$axios.get('/all').then(resp =>{ if( resp){ this.tableData = resp.data this.counts() this.$emit('exchange') } }) },FileMon.vue 监听 exchange 事件,触发时执行 exchange 函数
<el-container> <el-aside> <Echart ref="ac_e"></Echart> </el-aside> <el-container> <el-main> <Table ref="ac_t" @exchange="exchange()"></Table> </el-main> </el-container> </el-container>exchange 函数 取 Echart.vue 中的 ac 变量 赋值为 Table.vue 中的 ac 变量,调用 Echart.vue 变量的 load 方法。
methods: { exchange: function() { this.$refs.ac_e.$data.ac = this.$refs.ac_t.$data.ac this.$refs.ac_e.loads() } } } 5.7 main.js // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' import axios from 'axios' //引入axios //设置代理 axios.defaults.baseURL = 'http://localhost:8443/api' //注册全局 Vue.prototype.$axios = axios import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.config.productionTip = false Vue.use(ElementUI); /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' }) 5.8 路由 import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import FileMon from '@/components/FileMon' Vue.use(Router) export default new Router({ routes: [ { path: 'http://www.likecs.com/', name: 'HelloWorld', component: HelloWorld }, { path: '/fm', name: 'FileMon', component: FileMon } ] })