async/await

1.async/await场景

这是一个用同步的思维来解决异步问题的方案，当前端接口调用需要等到接口返回值以后渲染页面时。

methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id));
          fetchOverview().then(response => { 
            this.option.series[0].data = response.items
          }).catch(error => {
            console.log(error);
          })
      this.chart.setOption(this.option);
    },
  }

methods: {
    async initChart() {
      this.chart = echarts.init(document.getElementById(this.id));
      await fetchOverview().then(response => { 
        this.option.series[0].data = response.items
      }).catch(error => {
        console.log(error);
      })
      this.chart.setOption(this.option);
    },
  }

this.$emit

子组件

<el-dialog :before-close="closeVideo" >
      
closeVideo() { 
    this.$emit('closeVideoFilterModal'，value) 	// 第一步
},

父组件

import videoFilter from '@/components/videoFilter'

components: { voiceIntercom },
    
<video-filter @closeVideoFilterModal="closeVideoFilterModal" />	// 第二部 @这个

closeVideoFilterModal(value) { 	// 第三步 这个就是子组件绑定的时间 value为传参
    this.pictureAdjustmentVisible = false 
},

Vue.component 全局注册组件

// 导入组件，组件必须声明 name
import iTree from './index.vue'

// 为组件添加 install 方法，用于按需引入
iTree.install = function (Vue) {
    Vue.component(iTree.name, iTree)
}

export default iTree

<iTree></iTree>

时间处理

new Date().getTime() / 1000	// 时间戳 --> 秒

表格内动态添加操作按钮

TableBase 子组件

<template>
    <el-table>
        <el-table-column v-else :key="index" :prop="item.prop" :label="$t(item.label)":show-overflow-tooltip="true">
          <template slot-scope="scope">
            <template v-if="item.render">
              <custom-cell :column="item" :row="scope.row" :render="item.render" :index="scope.$index"/>
            </template>
            <template v-else-if="item.slot">
              <slot :name="item.slot" :row="scope.row" :index="scope.$index"/>	// 这里是往表格内动态加 是显示按钮还是显示文本
            </template>
            <template v-else>
              <span>{{ scope.row[item.prop] }}</span>
            </template>
          </template>
        </el-table-column>
    </el-table>
</template>

父组件

可以根据传入配置动态显示 复选框 或者 按钮

<table-base :table-height="'650'" :columns="columns" :list-data="listData" :total="total" :loading="loading" >
  <template slot="operation" slot-scope="scope">	// 这个就是 slot 动态组件
    <el-button v-if="scope.row.handleStat == 0" type="primary" size="small" @click="openAlarmModal(scope.row, 'handle')">
      {{ $t('alarm.process.process') }}
    </el-button>
    <el-button v-else type="primary" size="small" @click="openAlarmModal(scope.row, 'view')">
      {{ $t('real.time.monitor.view') }}
    </el-button>
  </template>
</table-base>

columns: [
    {type: 'selection'},
    { prop: 'plateNo', label: this.$t('hard.disk.failure.plateNo'), width: '100px' },
    { prop: 'deviceName', label: this.$t('hard.disk.failure.deviceName'), width: '120px' },
    { prop: 'handleDate', label: this.$t('alarm.process.process.time') },
    { slot: 'operation', label: this.$t('alarm.process.operation'), width: '120px'},
],

template及template上使用v-for

<template>
    <div class="root">
        <template v-for="item,index in 5">		// 这个 template 标签只会渲染出来一个 div， 但是采用 div 来渲染的话就会出来很多个 div
            <div>测试{{index}}</div>
        </template>

    </div>
</template>

<div class='root'>
    <div>测试0</div>
    <div>测试1</div>
    <div>测试2</div>
    <div>测试3</div>
    <div>测试4</div>
</div>

Sass的@mixin与@include

@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。

@include 指令可以将混入（mixin）引入到文档中。

@mixin important-text {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
}

.danger {
  @include important-text;
  background-color: green;
}

向混入传递变量

/* 混入接收两个参数 */
@mixin bordered($color, $width) {
  border: $width solid $color;
}

.myArticle {
  @include bordered(blue, 1px);  // 调用混入，并传递两个参数
}

.myNotes {
  @include bordered(red, 2px); // 调用混入，并传递两个参数
}