如何從Vue js的App.vue獲取Main.js中的數據？

Question

這是我在main.js

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

 
export const bus = new Vue(); 
 

 
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 } 
 
}) 
 

 

 
// const bus = require('./bus.js'); 
 

 

 

 
var newData = new Vue({ 
 

 
    el: '#graph-content', 
 
    data: { 
 
    graphD:'', 
 
    title: 'test title' 
 
    }, 
 

 
    methods: { 
 
    fetchData: function (data) { 
 
    this.graphD = data; 
 
    console.log('Inside', this.graphD); 
 
    } 
 
    }, 
 
    created: function() { 
 
    bus.$on('graphdata', this.fetchData); 
 
    } 
 

 

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

代碼這裏是公交車從app.vue

bus.$emit('graphdata', "test bus"); 

發出的數據使用下面的代碼我試圖從應用程序獲取數據。 VUE。我正在獲取fetchData範圍內的數據，但我沒有從newData範圍之外獲取數據。 任何人都可以建議我問題或可能的解決方案將數據/對象從app.vue傳遞到main.js文件。

****更新***** 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 './main.js' 
 

 
    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"); 
 
    }); 
 

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

 
</script> 
 

 
<style> 
 

 
</style>

Answer 1

您正在創建VUE的3個實例，由於JS三個實例不會使異步確保你的活動運作完美。你可能會佈局我下面的代碼事件總線，而是採用創建使用安裝鉤

bus.js

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

main.js

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

<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> 

而不是創建多個根組件只保留一個組件並調用每個組件的子組件