實習項目開發總結

非父子組件間的通訊

1. 在src中建立一個eventbus.js做爲eventbus的中轉站
2. 使用emit與on來在不一樣組件中監聽事件

import Vue from 'vue'
export default new Vue();
//建立eventBus中轉站

import EVENTBUS from '@/eventBus'
//在須要用到的組件中導入eventbus

updateList(){
        EVENTBUS.$emit('updateList', 1)
      }
//註冊事件，並傳遞參數

activeGetSpliter() {
        EVENTBUS.$on('activeGetSpliter', reg => {
          this.isLoading = true;
          this.isActive = false;
          this.getSpliter(reg);
          });
      },
//監聽事件，處理參數

在Vue中操做DOM

其實若是使用了VUE，我的認爲不與DOM打交道是最好的：)

@click='changeSpliter(spliterIndex, $event)'
//在函數中傳遞一個叫$event的參數

var spliterDOM = $event.target.parentNode.previousElementSibling.childNodes[0];
//如此即可以獲取DOM

console.log($event.target)
//能夠如此來觀察所選取的是何元素

v-for嵌套循環

從後端獲得的json裏有一backUp數組，數組由數個對象組成，每一個對象裏包含一個字符串類型的spliter_id，和一個brand_arr的數組。brand_arr數組中有數個對象，每一個對象包brand_id和一些其餘的brand基本信息。如今要將數個spliter_id展現，且在其下方展現其包含的brand_id。

<div>
<div
  v-for='(spliter, spliterIndex) in backUp'
  :key='spliterIndex'
  ><!--單個spliter-->
  {{ spliter.spliter_id}}
</div>
<div
  v-for='(brand, brandIndex) in spliter.brand_arr'
  :key='brandIndex'
  ><!--單個brand-->
  {{ brand.brand_id }}
</div>
</div>

注意兩個v-for中的參數使用。使用合適的參數能夠很快捷的完成循環嵌套，來展現包含多個層級關係的數據

vue開發環境跨域代理配置

在config/index.js中寫入如下內容

moudle.exports =  {
  dev: {
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/GetSpliterAndBrandBySite': {
        target: 'https://wpc-product.earth.xpas.xxx.com',
        changeOrigin: true,
        secure: false,
        pathRewrite: {
          '^/GetSpliterAndBrandBySite': '/GetSpliterAndBrandBySite'
        }
      },
    },
  }
}

接下來，若是想使用GetSpliterAndBrandBySite這個api，只需在請求中寫入

var url = '/GetSpliterAndBrandBySite';

就好了。