实习项目开发总结

非父子组件间的通讯

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

就好了。