vue组件之间的传值

父传子

父组件

组件 :data=“thingDevice”

<el-tabs v-model="activeName"
               @tab-click="handleClick">
        <el-tab-pane label="基础信息"
                     name="item-1">
          <basic :data="thingDevice"></basic>
        </el-tab-pane>
</el-tebs>

<script>
import BaseMixin from "@/mixins/base";
import request from "@/utils/request";
import SETTING from "@/settings";
import Basic from "../details/basic"

export default {
  mixins: [BaseMixin],
  components: {
    Basic
  },
  data () {
    return {
      activeName: sessionStorage.equipmentActivenName || "item-1",
      thingDevice: {}, //设备信息
    };
  },
  computed: {
    id () {
      return this.$route.query.devId
    }
  },
  created () {
    if (!this.id) {
      this.$router.replace("/equipment/device_index")
      return
    }
    this.getList();
  },
  methods: {
    handleClick (tab) { 
      sessionStorage.equipmentActivenName = tab.name // 缓存页面状态
    },
    getList () {
      this.loading = true
      request({
        url: `/manager/DeviceBindInfo/getDeviceDetails/` + this.id,
      }).then(
        (res) => {
          if (res[SETTING.MANAGER_STATE] === SETTING.MANAGER_SUCCESS_STATE) {
            this.thingDevice = res.data.thingDevice
          } else {
            this.$message({
              type: "error",
              message: res.msg || res.resultMsg || "查询失败",
            });
          }
          this.loading = false
        },(_) => {
          this.loading = false
          this.$message({
            type: "error",
            message: _.resultMsg || "查询列表失败",
          });
        }
      );
    },
  },
};
</script>

子组件

props: {
data: {
type: Object,
default: () => {
return {}
}
}, },

<template>
  <div style="max-width:1000px">
    <el-descriptions class="list"
                     title="设备信息"
                     :column="2">
      <el-descriptions-item label="设备名称">{{data.deviceName}}</el-descriptions-item>
      <el-descriptions-item label="设备ID">{{data.devId}}</el-descriptions-item>
      <el-descriptions-item label="产品名称">{{data.productName}}</el-descriptions-item>
      <el-descriptions-item label="产品ID">{{data.productId}}</el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
import BaseMixin from "@/mixins/base";

export default {
  mixins: [BaseMixin],
  props: {
    data: {
      type: Object,
      default: () => {
        return {}
      }
    },
  },
  data () {
    return {};
  },
  methods: {}
}
</script>

子传父

父组件

组件 ref=“device”

赋值 let data = this.$refs.device.selectRowData

<el-drawer title="新增设备"
               :visible.sync="showAdd"
               :direction="direction"
               size="50%">
      <template>
        <div class="demo-drawer__content">
          <dev-add ref="device"></dev-add>
        </div>
        <div class="demo-drawer__footer">
          <el-button @click="showAdd= false">取 消</el-button>
          <el-button type="primary"
                     @click="onSubmit">确 定</el-button>
        </div>
      </template>
 </el-drawer>

<script>
import BaseMixin from "@/mixins/base";
import request from "@/utils/request";
import SETTING from "@/settings";
import deviceAdd from "../group/deviceAdd"

export default {
  mixins: [BaseMixin],
  components: {
    'dev-add': deviceAdd
  },
  data () {
    return {
      showAdd: false,
      rowId: '',
      rowName: '',
    };
  },
  mounted () {
    this.getList()
    this.getprojectList()
    this.handleQuery();
  },

  methods: {
    onSubmit () {
      this.showAdd = false
      let data = this.$refs.device.selectRowData
      let deviceId = []
      let i = 0
      data.forEach((res) => {
        deviceId[i] = res.devId
        i++
      });
      request({
        url: `/manager/groupDeviceBind/update`,
        method: "post",
        data: {
          deviceList: deviceId
        },
      }).then((res) => {
        if (res[SETTING.MANAGER_STATE] === SETTING.MANAGER_SUCCESS_STATE) {
          this.$message({
            type: "success",
            message: res.message || "操作成功",
          });
        } else {
          this.$message({
            type: "error",
            message: res.message || "操作失败",
          });
        }
      });
    },
  },
};
</script>

子组件

定义并赋值 this.selectRowData = val

<template>
  <div>
    <div class="center-container">
      <el-table border
                ref="multipleTable"
                :data="tableData"
                :header-cell-class-name="cellClass"
                header-row-class-name="iot-table-header"
                @selection-change="handleSelectionChange"
                height="100%">
        <template slot="empty">
          <el-empty description="暂无数据"></el-empty>
        </template>
        <el-table-column align="center"
                         type="selection"
                         width="50" />
        <el-table-column align="center"
                         type="index"
                         label="序号"
                         width="60"></el-table-column>
        <el-table-column prop="devId"
                         label="设备ID"
                         min-width="100"></el-table-column>
        <!-- 省略更多列-->
      </el-table>
    </div>
    <div class="footer-container">
      <pagination v-show="pagination.total > 0"
                  :limit.sync="pagination.size"
                  :page.sync="pagination.page"
                  :total="pagination.total"
                  @pagination="getList" />
    </div>
  </div>
</template>

<script>
import BaseMixin from "@/mixins/base";
import request from "@/utils/request";
import SETTING from "@/settings";

export default {
  mixins: [BaseMixin],
  data () {
    return {
      selectRowData: [],
    };
  },
  mounted () {
    this.handleQuery();
  },

  methods: {
    // 查询列表信息
    handleQuery () {
      this.pagination.page = 1;
      this.getList();
    },
    getList () {
      this.isTableLoading = true;
      request({
        url: `/manager/DeviceBindInfo/queryAllDevice`,
        method: "post",
        data: {
          pageNum: this.pagination.page,
          pageSize: this.pagination.size,
          ...this.searchForm,
        },
      }).then(
        (res) => {
          if (res[SETTING.MANAGER_STATE] === SETTING.MANAGER_SUCCESS_STATE) {
            this.tableData = res.data.list;
            this.pagination.total = res.data.total;
          }
          this.isTableLoading = false;
        },
        (_) => {
          this.isTableLoading = false;
          this.$message({
            type: "error",
            message: _.resultMsg || "查询列表失败",
          });
        }
      );
    },
    cellClass (row) {
      if (row.columnIndex === 0) {
        return 'disabledCheck'
      }
    },
    handleSelectionChange (val) {
      this.selectRowData = val
    },
  },
};

在实际的项目开发中暂时就学了这两种，以后学到了更多的再更新吧，陌生的朋友们，我们一起加油呀！