vue-cli 开发多页面应用,数据请求和传输的问题

我使用 vue-cli 开发多页面应用,没有使用 router ,于是我现在只能在 main.js 里面 Vue 实例化的时候通过 Vue 的生命钩子进行请求数据。现在数据请求到了,如何将数据传给 app.vue?以下是代码:
不限于如何传数据给 app.vue 如何能在 app.vue 中请求数据也可以。

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
import App from './App'
// import router from './router'
import mock from '@/utils/index.js'
import '@/assets/normalize.css'
import '@/assets/common.css'
import '@/assets/icon.css'

axios.defaults.url = 'http://rap2api.taobao.org/app/mock/2006/'
Vue.use(VueAxios, axios)

Vue.config.productionTip = false

var vm = new Vue({
    el: '#app',
    // router,
    template: '<App/>',
    components: { App },
    data: {
        data: {}
    },
    beforeMount: function() {
        let _this = this;
        Vue.axios.get('/index/articleList').then((res) => {
            res && (_this.$data.data.articleList = res.data.articleList);
        });
    }
});
阅读 4.1k
3 个回答

不是很懂题主的意思,既然你用了vue-cli开发多页面应用,大概的意思就是,每一个页面都会有一个独立的 js 入口,每个js都会有一个vue根实例,根实例包含着多个.vue 组件。
就上面的main.js 而言

  • 如何能在 app.vue 中请求数据 ?
    把beforeMount写到app.vue 就好啦。
  • 如何传数据给 app.vue ?
    父组件通过props向下传值给app.vue。

let Event = new Vue();

// 监听
Event.$on('xxx', function (a) {});

// 触发
Event.$emit('xxx', a);

哈哈,是我学艺不精。是这样的组件自己也有生命周期的,直接通过组件的生命周期直接就能使用 ajax 获取数据了。之前我一直以为单文件组件是没有生命周期的,被群里大神点醒,试了一下,可以在单文件组件里面直接通过和实例一样的生命周期来获取服务器端数据了。第一位大神也说了,可以将生命周期直接写到 app.vue 里面去。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题