其他分享
首页 > 其他分享> > vue中父子组件及 watch用法

vue中父子组件及 watch用法

作者:互联网

现有一个需求如下

 

 

 

 

点击“存包记录”,出现弹窗(如下图),向弹窗传递个唯一的订单id(该表主键),通过订单id 查询出来弹窗中的列表, 另一张表,与之前表关联)

 

 

 数据库主要涉及两张表

 

涉及的主表

关联的表(弹窗列表查询的数据来源)

 

 

 

需求如上,现在开始梳理做该需求的思路。

 

 把图一页面 看做父组件,点击按钮出现 的弹窗看做子组件

插入小知识点:

【1.什么是父子组件?

在一个组件中又定义了其它组件就是父子组件,其实局部组件就是最简单的父子组件, 因为可以把Vue实例看做是一个大组件,我们在Vue实例中定义了局部组件, 就相当于在大组件里面定义了小组件, 所以局部组件就是最简单的父子组件  ,比如图一列表中点击存包记录按钮弹窗,弹窗和图一列表 两者就是大组件中又定义了一个局部组件

2.如何定义其它的父子组件

 自定义组件中也可以使用components, 如下所贴代码

贴出父组件部分关键代码  (图一表格)

<el-table v-loading="loading" :data="lockerList"   @selection-change="handleSelectionChange"  :row-class-name="rowClassName" border>
      <el-table-column type="selection" width="60" align="center" />
      <el-table-column label="序号" type="index" width="60" align="center">
        <template slot-scope="scope">
          <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单编号" width="200" align="center" prop="orderNo" />
      <el-table-column label="设备编号" width="200" align="center" prop="deviceCode" />
      <el-table-column label="设备名称" width="220" header-align="center" align="left" prop="deviceName" />
      <el-table-column label="存包格位置" width="100"  align="center" prop="storageLocation" />
      <el-table-column label="绿道名称"  width="250" header-align="center" align="left" prop="greenwayName" />
      <el-table-column label="芯片编号" width="160" align="center" prop="chipNumber" />
      <el-table-column label="存包人"  width="120" align="center" prop="lockeruserName" />
      <el-table-column label="存包时间" align="center" prop="lockerTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.lockerTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="storeRecords(scope.row)"
           >存包记录</el-button>

        </template>
      </el-table-column>
    </el-table>


 弹窗html代码:
<!-- 存包记录--> <el-dialog :title="title" :visible.sync="storeRecordOpen" width="1400px" append-to-body > //:visible.sync="storeRecordOpen" 显示为弹窗 <LockerRecord :orderId="orderId"></LockerRecord> //LockerRecord是声明好的自定义组件 需要在js中声明 在html中这样使用 , :orderId 形式直接使用在data()中声明的 orderId 变量              <div style="margin-top:40px;margin-left: 1266px;" > <el-button @click="storeRecordOpen = false">关 闭</el-button> </div> </el-dialog>

 

“存包记录”作为一个按钮,加入点击事件。

在js中

注: data()是一个html和js交互的 桥梁,变量在data()中定义了可以直接在html及javascript中 method方法 使用

components: {LockerRecord, },            //LockerRecord为自定义的一个组件。需要在js中声明
data() { return { orderId:'',
    //存包记录窗口
   storeRecordOpen:false, //弹窗层定义
},

 

  storeRecords(row) {
      this.orderId=row.orderId    //row.orderId 是html表格中的传递过来的订单id, this.orderId是js  定义的订单id变量,需要在data()中声明一下。如上
      this.storeRecordOpen=true;    //显示弹窗
      this.title="存包记录"           //弹窗标题
    },

 

 以上文件都在父组件vue 及Js 定义,

 

但是子组件  列表数据如何来呢,如何与父组件挂钩呢?

父组件vue

 

 

 

 

子组件(弹窗页面)单独做一个vue文件 

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="98px">

    </el-form>
    <el-table ref="tables" v-loading="loading" :data="list"  border>
       <el-table-column label="序号" type="index" width="60" align="center">
        <template slot-scope="scope">
          <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
        </template>
      </el-table-column>
       <el-table-column label="设备编号" width="150" align="center" prop="deviceCode" />
       <el-table-column label="设备名称"  header-align="center" align="left" prop="deviceName" />
       <el-table-column label="存包格位置" width="160" align="center" prop="storageLocation" />
      <el-table-column label="存取时间" align="center" prop="lockerTime" width="250">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.lockerTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
     <el-table-column label="存取操作"  width="250" align="center" prop="lockerType" >
        <template slot-scope="scope">
          <dict-tag :options="dict.type.locker_type" :value="scope.row.lockerType"/>
        </template>
      </el-table-column>
     </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

  </div>
</template>

<script>
import { getRecord} from "@/api/order/locker/lockerRecord";

export default {
  name: "LockerRecords",
  dicts: ['locker_type'],
  props:['orderId'],  
  data() {
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      newOrderId:'',
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      list: [],
      // 存包记录表格数据
      recordList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderNo: null,
        deviceId: null,
        orderId: null,
        storageLocation: null,
        lockerTime: null,
        lockerType: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    };
  },

  created() {
    this.getList();
  },

  methods: {
    /** 查询存包记录列表 */
    getList() {
      this.loading = true;
      getRecord(this.newOrderId).then( response => {
        this.list = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
  },
  watch: {
    orderId: {
      deep: true,
      immediate: true, // 监听到后,立即执行 handler方法
      handler: function(newVal, oldVal) {
        this.newOrderId=newVal
        this.getList();
      },

    }
  }
};
</script>

 

 子组件用父组件的数据

 props: ['orderId'],  //需要用到的数据 通过props去传值

即可使用从父组件传来的数据

 

我们看到在该vue  data()中定义了一个

  newOrderId:'', 用来接收变化之后的的订单id ,并把这个新值通过getRecord函数传递给后台 查数据
import request from '@/utils/request'



// 查询存包订单详细
export function getRecord(orderId) {
   return request({
    url: '/order/record/getRecord/' + orderId,    //把上面监测到的新值作为参数传给后台传值
    method: 'get'
  })
}

springboot 后台

  /**
     * 查询存包记录列表
     */
    @PreAuthorize("@ss.hasPermi('order:record:list')")
    @GetMapping(value = "getRecord/{orderId}")
    @ApiOperation(value = "查询存包记录列表", notes = "传入orderLockerRecord")
    public TableDataInfo<OrderLockerRecord> list(@PathVariable("orderId") Long orderId) {
        startPage();
        List<OrderLockerRecord> list = orderLockerRecordService.selectOrderLockerRecordList(orderId);
        return getDataTable(list);    //返回list 
    }

 

查出来的list  返回给子组件的vue  table中

这样呢 每点击一次图一的存包记录,会根据不同订单id,弹窗,并查出相应的关联表记录,并显示在弹窗中

 

 

 

其中涉及 watch进行监听 知识点:

当 项目中需要对某个值进行监听做一些操作的时候我们会用到watch进行监听

在vue中,使用watch来监听一个值的变化

 

注【 watch 与data 或method同层级,别把watch放入method中否则报错】 

 

watch 是一个监听处理函数,当每次监听到orderId值发生改变时,执行函数。

比如当父组件向子组件动态传值时,子组件props首次获取到父组件传来得默认值时,也需要执行函数,此时就需要将immediate设为true.

 

标签:orderId,vue,watch,存包,组件,true,弹窗
来源: https://www.cnblogs.com/yizhizhangBlog/p/16577637.html