Javascript 如何从vue js中的App.vue获取Main.js中的数据？

这是我在

main.js中的代码


从“Vue”导入Vue
从“./App”导入应用程序
从“vue路由器”导入VueRouter
从“vue资源”导入vueResource
//从“/bus.js”导入{bus}
//从“./components/MainContent”导入MainContent
export const bus=new Vue（）；
Vue.config.productionTip=true
Vue.use（vueResource）
Vue.use（VueRouter）
常量路由器=新的VueRouter({
模式：“历史”，
基本名称：_dirname，
路线：[
//{路径：'/'，组件：MainContent}
]
})
/*eslint禁用无新*/
新Vue({
el:“#应用程序”，
模板：“”，
组件：{App}
})
//const bus=require（'./bus.js'）；
var newData=newvue({
el:“#图形内容”，
数据：{
图：''，
标题：“测试标题”
},
方法：{
fetchData:函数（数据）{
this.graphD=数据；
console.log（'Inside'，this.graphD）；
}
},
已创建：函数（）{
总线$on（'graphdata'，this.fetchData）；
}
})
console.log（'OutSide'，newData.\u data.graphD）
您正在创建3个vue实例，由于js的异步，这三个实例无法确保事件正常工作。您可以按照下面的代码布局事件总线，而不是使用created使用mounted钩子

bus.js

import Vue from 'vue';
export const bus = new Vue();

import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import vueResource from 'vue-resource'
import {bus } from './bus'
// import MainContent from './components/MainContent'

Vue.config.productionTip = true
Vue.use(vueResource)
Vue.use(VueRouter)


const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  routes: [
    // {path:'/',component: MainContent }
  ]

})


/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

var newData = new Vue({
  el: '#graph-content',
  data: {
    graphD:'',
    title: 'test title'
  },
  methods: {
    fetchData: function (data) {
      this.graphD = data;
      console.log('Inside', this.graphD);
    }
  },
  mounted: function () {
    bus.$on('graphdata', this.fetchData);
  }
})

console.log('OutSide', newData._data.graphD)

main.js

import Vue from 'vue';
export const bus = new Vue();

import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import vueResource from 'vue-resource'
import {bus } from './bus'
// import MainContent from './components/MainContent'

Vue.config.productionTip = true
Vue.use(vueResource)
Vue.use(VueRouter)


const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  routes: [
    // {path:'/',component: MainContent }
  ]

})


/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

var newData = new Vue({
  el: '#graph-content',
  data: {
    graphD:'',
    title: 'test title'
  },
  methods: {
    fetchData: function (data) {
      this.graphD = data;
      console.log('Inside', this.graphD);
    }
  },
  mounted: function () {
    bus.$on('graphdata', this.fetchData);
  }
})

console.log('OutSide', newData._data.graphD)

从“Vue”导入Vue
从“./App”导入应用程序
从“vue路由器”导入VueRouter
从“vue资源”导入vueResource
从“/bus”导入{bus}
//从“./components/MainContent”导入MainContent
Vue.config.productionTip=true
Vue.use（vueResource）
Vue.use（VueRouter）
常量路由器=新的VueRouter({
模式：“历史”，
基本名称：_dirname，
路线：[
//{路径：'/'，组件：MainContent}
]
})
/*eslint禁用无新*/
新Vue({
el:“#应用程序”，
模板：“”，
组件：{App}
})
var newData=newvue({
el:“#图形内容”，
数据：{
图：''，
标题：“测试标题”
},
方法：{
fetchData:函数（数据）{
this.graphD=数据；
console.log（'Inside'，this.graphD）；
}
},
挂载：函数（）{
总线$on（'graphdata'，this.fetchData）；
}
})
console.log（'OutSide'，newData.\u data.graphD）

app.vue

<template>
  <div>
    <app-header></app-header>
    <app-maincontent></app-maincontent>
  </div>
</template>

<script>
  import Header from './components/Header.vue'
  import SideNav from './components/SideNav.vue'
  import MainContent from './components/MainContent.vue'
  import GraphA from './components/GraphA.vue'
  import {bus} from './bus'

  var apiURL = 'http://localhost:3000/db';
  export default {
    components: {
      'app-header': Header,
      'app-sidenav': SideNav,
      'app-maincontent': MainContent,
      'app-grapha': GraphA
    },
    data() {
      return {
        users: []
      }
    },
    methods: {
      fetchData: function () {
        var self = this;
        $.get(apiURL, function (data) {
          self.users = data;
          // console.log(data);
          bus.$emit('graphdata', "test bus");
        });

      }
    },
    mounted: function () {
      this.fetchData();
    }
  }

</script>

<style>

</style>


从“./components/Header.vue”导入标题
从“./components/SideNav.vue”导入SideNav
从“./components/MainContent.vue”导入MainContent
从“./components/GraphA.vue”导入GraphA
从“/bus”导入{bus}
var apiURL=http://localhost:3000/db';
导出默认值{
组成部分：{
“应用程序标题”：标题，
“应用程序侧导航”：侧导航，
“应用程序maincontent”：maincontent，
“应用程序grapha”：grapha
},
数据（）{
返回{
用户：[]
}
},
方法：{
fetchData:函数（）{
var self=这个；
$.get（apirl，函数（数据）{
self.users=数据；
//控制台日志（数据）；
总线。$emit（'graphdata'，“测试总线”）；
});
}
},
挂载：函数（）{
这是fetchData（）；
}
}

相反，创建多个根组件只保留一个组件，并将每个组件称为子组件
添加完整的app.vue文件代码。您正在创建两个vue实例，并将一个总线实例保持为单独的vue实例。您是如何实现
总线的
？我更新了文件。你能看看吗！谢谢你检查输出了吗？仍然console.log（'OutSide'，newData.\u data.graphD）没有获取任何数据。由于javascript的异步性质，它不会给出任何数据，
console.log（'OutSide'，newData.graphD）
在完全执行vue实例创建过程之前执行。您知道获取它的可能解决方案吗？