vue3子父组件之间的调用

子组件:

复制代码
capacityIndex.vue

父组件:

index.vue

A.子组件获取父组件属性

1.在父组件中引用子组件

复制代码
import capacityIndex from "./capacityIndex";
<capacityIndex :tankInfo="tankInfo" :deviceNameInfo="deviceNameInfo" ref="sonMethodRef"></capacityIndex>

其中tankInfo和device Name Info为子组件需要的属性

2.子组件接收父组件传递的属性

const props = defineProps({
  // 油罐编号
  tankInfo: {
    type: String,
    default: ""
  },
  // 液位仪编号
  deviceNameInfo: {
    type: String,
    default: ""
  },
})

3.子组件调用属性

/** 查询罐容信息列表 */
function getList() {
  loading.value = true;
  queryParams.value.tankId = props.tankInfo;
  queryParams.value.deviceName = props.deviceNameInfo;
  listTankCapacity(queryParams.value).then(response => {
    tankCapacityList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}

其中props.tankInfo就是调用了传递过来的参数。

B.父组件调用子组件方法

1.父组件调用子组件时定义ref为sonMethodRef

<capacityIndex :tankInfo="tankInfo" :deviceNameInfo="deviceNameInfo" ref="sonMethodRef"></capacityIndex>

2.在父组件中定义ref

复制代码
const sonMethodRef = ref(null)

3.父组件调用子组件暴漏的方法

function capaCityInfo(row){
  capaCityTitle.value = "罐容信息";
  capaCityOpen.value = true;
  tankInfo.value = row.id;
  deviceNameInfo.value = row.deviceName;
  nextTick(() => {
    sonMethodRef.value.getList();
  })
}

其中

复制代码
nextTick(() => {
  sonMethodRef.value.getList();
}) 就是调用的过程。

4.子组件暴漏父组件需要的方法,getList互相对应。

defineExpose({
  getList
})
function getList() {
  loading.value = true;
  queryParams.value.tankId = props.tankInfo;
  queryParams.value.deviceName = props.deviceNameInfo;
  listTankCapacity(queryParams.value).then(response => {
    tankCapacityList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}
相关推荐
我要洋人死1 小时前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人1 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人1 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR1 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香1 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596931 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai1 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_9151 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼3 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風7 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#