javascript - 如何从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");

使用以下代码我尝试从 app.vue 获取数据。我正在 fetchData 范围内获取数据，但没有从 newData 范围之外获取数据。 谁能建议我将数据/对象从 app.vue 传递到 main.js 文件的问题或可能的解决方案在哪里。

****已更新***** 应用程序.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

您正在创建 3 个 vue 实例，由于 js 异步，三个实例无法确保您的事件完美运行。您可以布局我按照代码执行的事件总线，而不是使用 created 使用 mounted 钩子(Hook)

bus.js

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

ma​​in.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)

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>

创建许多根组件时只保留一个组件并将每个组件称为子组件