VUE前端技术之父子组件调用和传值方法

1.父组件模板

<!--测试页-->
<!--@author cookie-->
<!--@since 2021-4-16-->
<template>
  <div class="productupcmanage">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
      <el-form-item>
        <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
                        end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-select v-model="queryParams.whetherAvailable" placeholder="--是否已使用--">
          <el-option v-for="item in whetherAvailables" :key="item.dictValue" :label="item.dictLabel"
                     :value="item.dictValue">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="UPC" prop="UPC">
        <el-input v-model="queryParams.upcCode" placeholder="请输入产品sku" clearable size="small"
                  @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item>
        <el-select v-model="queryParams.availableSourceChannel" placeholder="--可使用来源渠道--">
          <el-option v-for="item in sources" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="queryParams.afterUseSourceChannel" placeholder="--使用后来源渠道(亚马逊平台)--">
          <el-option v-for="item in sources" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item> 
      
		//父子传值按钮演示
        <el-button type="primary" icon="el-icon-setting" size="mini" @click="SetState">设置使用状态</el-button>
        
      </el-form-item>
    </el-form>
    <el-table v-loading="loading " style="margin-top: 25px; " stripe :data="productList "
              @selection-change="handleSelectionChange " :default-sort="{prop: 'date', order: 'descending'} ">
      <el-table-column type="selection" width="50" align="center"/>
      <el-table-column label="ID" align="center " prop="id" width="80 "/>
      <el-table-column label="UPC" align="center " prop="upcCode" width="150 "/>
      <el-table-column label="是否可用" align="center " prop="whetherAvailable" width="200 " :formatter="OrNot"/>
      <el-table-column label="可使用来源渠道" align="center " prop="availableSourceChannel" width="180"
                       :formatter="BeforeUsing"/>
      <el-table-column label="使用后来源渠道(亚马逊平台) " align="center " prop="afterUseSourceChannel" width="200 "
                       :formatter="AfterUsing"/>
      <el-table-column label="添加时间" align="center " prop="createTime" width="160 "/>
      <el-table-column label="使用时间" align="center " prop="useTime" width="160 "/>
      <el-table-column label="操作人员" align="center " prop="createBy" width="180 "/>
      <el-table-column label="备注" align="center " prop="remark" width="210 "/>
      <el-table-column label="使用日志" align="center " prop="useJournal" width="150 "/>
    </el-table>
    <!-- 打开设置使用状态弹窗-->
    <setStatus v-if="setStatusVisible" ref="setStatus" @refreshDataList="getListll"/>

    <el-dialog :title="title " :visible.sync="OpenLoad">
    </el-dialog>
  </div>

</template>

<script>
  import setStatus from './setStatus-dialog'
  import { getToken } from '@/utils/auth'
  import { GetUpcList, UpcImport, UpcExport } from '@/api/sku/productupcmanage'
  import { sourceSelect } from '@/api/system/select'

  export default {
    components: {
      setStatus
    },
    data() {
      return {
        fatherseller: {
          id: '',
          state: '',
          source: '',
          Ids: []
        },
        //上传地址
        UpLoad: process.env.VUE_APP_BASE_API + '/product/productUpcManage/importExcel',
        //头文件
        headers: {
          Authorization: 'Bearer ' + getToken()
        },
        //是否显示弹窗
        open: false,
        //弹窗标题
        title: '',
        // 选中数组
        ids: [],

        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        //来源字典
        sources: '',
        //日期范围
        dateRange: [],
        //是否可用的字典翻译
        whetherAvailables: '',
        //列表数据
        productList: [],
        //搜索框参数
        queryParams: {
          //使用后来源渠道
          afterUseSourceChannel: '',
          // 可使用来源渠道
          availableSourceChannel: '',
          //开始时间
          beginTime: '',
          //结束时间
          endTime: '',
          //页码
          pageNum: '',
          //条数
          pageSize: '',
          //UPC
          upcCode: '',
          //是否使用
          whetherAvailable: ''
        },
        //弹窗
        setStatusVisible: false,
        OpenLoad: false
      }
    },
    created() {
      //查询列表
      this.getList()
      //来源字典
      sourceSelect().then(res => {
        this.sources = res.data
      })
      //查询是否可用的字典
      this.getDicts('sys_zero_one').then(response => {
        this.whetherAvailables = response.data
      })
    },
    methods: {
      /** 查询产品基础数据列表 */
      getList() {
        this.loading = false
        GetUpcList(this.queryParams).then(response => {
          this.productList = response.rows
          this.total = response.total
        })
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1
        this.getList()
      },

      //设置使用状态
      SetState() {
        this.setStatusVisible = true
        this.$nextTick(() => {
          //父向子传值
          this.$refs.setStatus.date = '1'
          //调用弹窗方法
          this.$refs.setStatus.init()
        })
      },

      //接受子组件传值
      getListll(value) {
        console.log('接收子组件值：' + value)
      },

      //  时间选择器
      SearchTime(dateRange) {
        if (null != dateRange && '' != dateRange) {
          this.queryParams.beginTime = dateRange[0]
          this.queryParams.endTime = dateRange[1]
        }
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      //是否可用字典
      OrNot(row) {
        return this.selectDictLabel(this.whetherAvailables, row.whetherAvailable)
      },
      //可使用来源渠道字典翻译
      BeforeUsing(row) {
        return this.selectLabel(this.sources, row.availableSourceChannel)
      },
      //使用后来源渠道(亚马逊平台) 字典
      AfterUsing(row) {
        return this.selectLabel(this.sources, row.afterUseSourceChannel)
      },
      //导出选中UPC
      ExportUpc() {
        if (this.ids == 0) {
          this.$confirm('请选择产品', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
        } else {
          const queryParams = this.queryParams
          this.$confirm('是否确认导出所有产品基础数据数据项?', '警告', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(function() {
              return UpcExport(queryParams)
            })
            .then(response => {
              this.download(response.msg)
            })
            .catch(error => {
              alert(error)
            })
        }
      },
      //批量导入
      handleChange(file, fileList) {
        this.fileList = fileList.slice(-3)
      },
      //修改可使用来源
      EditSource() {
        if (this.ids == 0) {
          this.$confirm('请选择产品', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
        } else {
          GetUpcList(this.ids).then(response => {
            this.fatherseller.id = response.rows.id
            this.open = true
            this.title = '修改可使用来源'
            this.fatherseller.source = 1
          })
        }
      },
      //批量导入UPC
      ImportUpc() {
      },
      //给子组件的关闭方法
      fatherMethod() {
        this.open = false
        this.getList()
      }
    }
  }
</script>

2.子组件演示

<!--设置使用状态弹窗-->
<!--@author cookie-->
<!--@since 2021-4-16-->
<template>
  <el-dialog :visible="visible" width="70%" title="产品访客记录" @close="visible = false">
    <div class="popup">
      <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
        <el-select v-model="queryParams.whetherAvailable" placeholder="--是否已使用--">
          <el-option v-for="item in whetherAvailables" :key="item.dictValue" :label="item.dictLabel"
                     :value="item.dictValue">
          </el-option>
        </el-select>
        <el-button type="success" @click="submitForm">成功按钮</el-button>
      </el-form>
    </div>
  </el-dialog>
</template>
<script>
  import { GetUpcList, UpcImport, UpcExport, BulkChanges, BulkEdit } from '@/api/sku/productupcmanage'
  import { sourceSelect } from '@/api/system/select'

  export default {
    props: {
      childseller: Object,
      fatherMethod: {
        type: Function,
        default: null
      }
    },
    data() {
      return {
        //判断是否有状态
        states: '',
        //判断是否有来源
        sources: '',
        whetherAvailables: '',

        //传值接受
        date: '',

        //弹窗状态
        visible: false,

        //提交对象
        queryParams: {
          ids: [],
          // 可使用来源渠道
          availableSourceChannel: '',
          //是否使用
          whetherAvailable: ''
        }
      }
    },
    created() {
      //查询是否可用的字典
      this.getDicts('sys_zero_one').then(response => {
        this.whetherAvailables = response.data
      })
      sourceSelect().then(res => {
        this.sources = res.data
      })

    },
    methods: {
      init() {
        console.log('接收父组件值:' + this.date)
        this.visible = true
      },
      //是否可用字典
      OrNot(row) {
        return this.selectDictLabel(this.whetherAvailables, row.whetherAvailable)
      },
      //使用后来源渠道(亚马逊平台) 字典
      AfterUsing(row) {
        return this.selectLabel(this.sources, row.afterUseSourceChannel)
      },
      /** 提交按钮 */
      submitForm() {
        this.visible = false
        //子组件向父组件传值
        this.$emit('refreshDataList','1')
      },
      cese() {
        if (this.fatherMethod) {
          this.fatherMethod()
        }
      }
    }
  }
</script>