Vue依赖注入provide,inject使用小结

使用背景：兄弟组件传值

兄弟组件传值我有试过两种方法1、一个兄弟组件先把值传给父组件，父组件再传给子组件、2、bus总线

今天我要说第三种就是依赖注入

1、公共的父组件provide依赖

<template>
  <div class="sv-monitor">
    <layout-aside @handleSelectMenu="LoadDataList"></layout-aside>
    <div class="scanWrapper">
      <div class="mainBody">
        <!--<div class="basicInfor">-->
        <!--<vehicle-basic-infor ref="child"></vehicle-basic-infor>-->
        <!--</div>-->
        <div class="basicApplication">
          <!--<vehicle-application-data ></vehicle-application-data>-->
          <vehicle-application-data :baseDataVehicle="baseData"></vehicle-application-data>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import LayoutAside from './LayoutAside'
import VehicleApplicationData from '@/views/ladon/vehicle/VehicleApplicationData'
export default {
  name: 'ProductionMonitorLayout',
  components: { VehicleApplicationData, LayoutAside },
  provide () {
    return {
      carNo: this.getCarNo,
      workplaceCode: this.getWorkplaceCode
    }
  },
  created () {

  },
  data () {
    return {
      loading: true,
      baseUrl: '/productionMonitor',
      baseData: null,
      dataList: {
        projectText: null,
        projectNo: null,
        gwna: null,
        gwbh: null,
        twna: null,
        twbh: null,
        obj: null,
        mtl: null,
        pic: null,
        svg: null,
        carOrderNo: null,
        carNo: null,
        unit: null
      }
    }
  },
  mounted () {
    this.load()
  },
  methods: {
    LoadDataList (data) {
      const app = this
      this.$ladon_request.get(`${this.baseUrl}/getEssentialInformationByTw`, {
        params: {
          tw: data
        }
      }).then(res => {
        if (res.success) {
          app.baseData = res.data
          app.dataList = res.data
        }
      })
    },
    load () {
      this.$ladon_request.get(`${this.baseUrl}/getEssentialInformationByTw`, {
        params: {
          tw: 'TS111101140101'
        }
      }).then(res => {
        this.baseData = res.data
        this.dataList = res.data
      })
    },
    /**
     * 获取车号
     */
    getCarNo () {
      return this.dataList.carNo
    },
    /**
     * 获取台位编码
     */
    getWorkplaceCode () {
      return this.dataList.twbh
    }
  }
}
</script>

<style scoped>
  .sv-monitor{
    display:flex;
    height:100%;
  }
  .scanWrapper{overflow: auto;}
  @import "../../../../public/ladon/css/main.css";

  .basicInfor >>> .svgModel{
    display: flex;
    flex: 0.5;
  }
</style>

2、子孙组件接收使用示例如下

<template>
    <div >
        <el-dialog
               id="DeviceInformationList"
                title="工装信息"
                :visible="show"
                :close-on-click-modal="false"
                append-to-body
                width="85%"
                class="pageStyle"
                @close="handleClose">
          <s-table
            :data = "tableData"
            :searchable = "false"
            :operable = "false"
            :pagination-total="paginationTotal"
            :on-page-turning="handlePageTurning"
          >
            <template #columns>
              <el-table-column
                prop="name"
                label="设备类型"
                align="center"
                show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                prop="materialCode"
                label="物料号"
                align="center"
                show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                prop="classificationCode"
                label="分类号"
                align="center"
                show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                prop="deviceLevel"
                label="设备等级"
                align="center"
                show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                prop="rfid"
                label="电子标签"
                align="center"
                show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                prop="dictDeviceLevel"
                label="设备等级"
                align="center"
                show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                prop="technologyCategoryName"
                label="工艺分类"
                align="center"
                show-overflow-tooltip>
              </el-table-column>
            </template>
          </s-table>
        </el-dialog>
    </div>
</template>

<script>

export default {
  name: 'DeviceInformationList',
  // 其他组件依赖
  components: { },
  inject: ['carNo', 'workplaceCode'],
  data () {
    return {
      loading: true,
      show: true,
      tableData: [],
      baseUrl: '/productionMonitor',
      paginationParams: {
        page: 1,
        pageSize: 10
      },
      paginationTotal: 30
    }
  },
  created () {
  },
  methods: {
    /**
             * 取消按钮点击
             */
    handleClose () {
      this.$emit('close')
    },
    loadDataList () {
      this.$ladon_request.get(`${this.baseUrl}/deviceInformationList`, {
        params: {
          tw: this.workplaceCode(),
          ...this.paginationParams
        }
      }).then(res => {
        if (res.success) {
          this.tableData = res.data
          this.paginationTotal = res.total
        } else {
          this.$message.error(res.message)
        }
      })
    },
    handlePageTurning (paginationParams) {
      this.paginationParams = { ...paginationParams }
      this.loadDataList()
    }
  }
}
</script>

<style>
    .pageStyle .el-pager li{
        min-width:10px !important;
    }
    .pageStyle .el-pagination__total{
        margin-right:1px !important;
    }
    #DeviceInformationList .el-dialog .el-dialog__body{
      min-height: 55vh;
      display:flex;
    }
</style>