Question

以下是main.js

中的代码

＆＃13;

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)

＆＃13;

这是总线从app.vue发出数据

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

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

****更新***** app.vue

＆＃13;

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

＆＃13;

Answer 1

您正在创建3个vue实例，由于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)

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

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

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

1 个答案: