javascript - How to get data in Main.js from App.vue in Vue js? - Stack Overflow

admin管理员组

文章数量:1334937

Here is my code in 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 './ponents/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:'/',ponent: MainContent }
  ]

})


/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<App/>',
  ponents: { 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)

Here is my code in 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 './ponents/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:'/',ponent: MainContent }
  ]

})


/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<App/>',
  ponents: { 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)

Here is the bus emit data from app.vue

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

Using following code I am trying to get data from app.vue. I am getting data inside the scope of fetchData but I am not getting from outside of newData scope. Could anyone suggest me where is the problem or possible solution to pass data/object from app.vue to main.js file.

****Updated ***** app.vue

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



        <app-maincontent></app-maincontent>


</div>
</template>

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

  var apiURL = 'http://localhost:3000/db';
export default {

  ponents: {
    '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>

• javascript
• vuejs2
• vue-ponent
• event-bus

Share Improve this question Follow edited Sep 12, 2017 at 14:52 pskkar asked Sep 12, 2017 at 14:24 pskkarpskkar 44211 gold badge44 silver badges1818 bronze badges 2

• add your full app.vue file code. Are you creating two instances of vue and are keeping a bus instance separate vue instance. How you implemented bus? – Suresh Velusamy Commented Sep 12, 2017 at 14:41
• I updated the files. Could you check it out! Thanks – pskkar Commented Sep 12, 2017 at 14:52

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

You are creating 3 instances of vue, due to asynchronous of js three instances won't make sure your events working perfectly. You might layout event bus I did following code, instead using created use mounted hook

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 './ponents/MainContent'

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


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

})


/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<App/>',
  ponents: { 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)

app.vue

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

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

  var apiURL = 'http://localhost:3000/db';
  export default {
    ponents: {
      '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>

Instead creating many root ponents keep only one ponent and call each ponent as child ponents

本文标签： javascriptHow to get data in Mainjs from Appvue in Vue jsStack Overflow