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