鍍金池/ 問答/人工智能  HTML/ vue-cli 開發(fā)多頁面應用,數(shù)據請求和傳輸?shù)膯栴}

vue-cli 開發(fā)多頁面應用,數(shù)據請求和傳輸?shù)膯栴}

我使用 vue-cli 開發(fā)多頁面應用,沒有使用 router ,于是我現(xiàn)在只能在 main.js 里面 Vue 實例化的時候通過 Vue 的生命鉤子進行請求數(shù)據?,F(xiàn)在數(shù)據請求到了,如何將數(shù)據傳給 app.vue?以下是代碼:
不限于如何傳數(shù)據給 app.vue 如何能在 app.vue 中請求數(shù)據也可以。

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);
        });
    }
});
回答
編輯回答
喵小咪

let Event = new Vue();

// 監(jiān)聽
Event.$on('xxx', function (a) {});

// 觸發(fā)
Event.$emit('xxx', a);

2017年1月19日 20:48
編輯回答
清夢

不是很懂題主的意思,既然你用了vue-cli開發(fā)多頁面應用,大概的意思就是,每一個頁面都會有一個獨立的 js 入口,每個js都會有一個vue根實例,根實例包含著多個.vue 組件。
就上面的main.js 而言

  • 如何能在 app.vue 中請求數(shù)據 ?
    把beforeMount寫到app.vue 就好啦。
  • 如何傳數(shù)據給 app.vue ?
    父組件通過props向下傳值給app.vue。
2017年10月15日 11:03
編輯回答
孤酒

哈哈,是我學藝不精。是這樣的組件自己也有生命周期的,直接通過組件的生命周期直接就能使用 ajax 獲取數(shù)據了。之前我一直以為單文件組件是沒有生命周期的,被群里大神點醒,試了一下,可以在單文件組件里面直接通過和實例一樣的生命周期來獲取服務器端數(shù)據了。第一位大神也說了,可以將生命周期直接寫到 app.vue 里面去。

2018年1月6日 18:29