Vue3子组件调用父组件的方法

devtools/2024/9/22 10:59:50/

父组件

<TableBoxref="tableBoxRef":tableDatas="tableData":page="page"@delRow="delRow":table_columns="table_columns">
</TableBox>
<script>
import TableBox from './components/tableBox.vue'      
export default {name: 'reimblist',components: {TableBox},setup() {const tableData: []const page: {currentPage: 1,pageSize: 10,totalPage: 0}const table_columns: [{title: '单据编号',dataIndex: 'reimbursementNo',key: 'reimbursementNo',align: 'center',slots: { customRender: 'reimbursementNo' },width: 150,show: true},{title: '单据类型',dataIndex: 'formName',key: 'formName',width: 130,show: true}]const delRow = async (record) => {Modal.confirm({title: () => '是否确认删除?',icon: () => createVNode(ExclamationCircleOutlined),okText: () => '确定',okType: 'danger',cancelText: () => '取消',onOk() {delReimbApi({ id: record.id }).then((res) => {if (res.success) {message.success(res.message)queryTable()} else {message.error(res.message)}})},onCancel() {console.log('Cancel')}})}return {page,table_columns,tableData,delRow}}   
}

子组件

<template><CommonTable:columns="table_columns.filter((col,num)=> {if(col.show){return col}})":dataSource="tableDatas":scrollX="1300":page="page"><template #reimbursementNo="{ record }"> <a-button type="text" danger @click="delRow(record)" v-if="record.state == 0">删除</a-button></template></CommonTable>
</template>
export default {components: {CommonTable},props: {tableDatas: {type: Array,default: () => []},page: {default: () => {},type: Object},table_columns: {type: Array,default: () => []}},setup(props, { emit }) {const delRow = (record) => {emit('delRow', record)}return {delRow}}
}
</script>

http://www.ppmy.cn/devtools/42551.html

相关文章

集合-1 数组ArrayListLinkedList

一.数组 1.什么是数组&#xff1f; 数组是一种用连续的内存空间存储相同类型数据的线性数据结构。 2.为什么数组下标是从0开始&#xff1f; &#xff08;1&#xff09;数组根据下标查找元素是基于寻址公式&#xff1a;元素地址数组首地址索引i*数组存储数据类型的大小 &am…

免费发布web APP的四个途径(Python和R)

免费发布数据分析类&#x1f310;web APP的几个途径&#x1f4f1; 数据分析类web APP目前用来部署生信工具&#xff0c;统计工具和预测模型等&#xff0c;便利快捷&#xff0c;深受大家喜爱。而一个免费的APP部署途径&#xff0c;对于开发和测试APP都是必要的。根据笔者的经验…

助你效率翻倍的VS Code插件

助你效率翻倍的VS Code插件

用神经网络预测三角形的面积

周末遛狗时&#xff0c;我想起一个老问题&#xff1a;神经网络能预测三角形的面积吗&#xff1f; 神经网络非常擅长分类&#xff0c;例如根据花瓣长度和宽度以及萼片长度和宽度预测鸢尾花的种类&#xff08;setosa、versicolor 或 virginica&#xff09;。神经网络还擅长一些回…

贴片 RS8752XK 封装SOP-8 250MHz,2通道高速运放

传感器信号放大&#xff1a;在传感器应用中&#xff0c;RS8752XK可以用于放大微弱的传感信号&#xff0c;如压力、温度、光强等传感器的信号。 数据采集系统&#xff1a;在数据采集设备中&#xff0c;RS8752XK可以用于放大和调理模拟信号&#xff0c;以供模数转换器&#xff0…

云WAF:企业网络安全的新标杆

随着互联网技术的飞速发展&#xff0c;Web应用已成为企业与用户交互的重要平台。然而&#xff0c;随之而来的网络安全威胁也日益复杂&#xff0c;如何有效地保护Web应用免受各种攻击&#xff0c;已成为企业面临的重大挑战。云WAF&#xff08;Web应用防火墙&#xff09;作为一种…

C++三剑客之std::any(二) : 源码剖析

目录 1.引言 2.std::any的存储分析 3._Any_big_RTTI与_Any_small_RTTI 4.std::any的构造函数 4.1.从std::any构造 4.2.可变参数模板构造函数 4.3.赋值构造与emplace函数 5.reset函数 6._Cast函数 7.make_any模版函数 8.std::any_cast函数 9.总结 1.引言 C三剑客之s…

基于百度千帆的大模型应用:英文助教Alex

基于百度千帆的大模型应用&#xff1a;英文助教Alex 立项说明&#xff1a;英文助教Alex -ver1:1 Alex基本信息1.1 提示词编写1.2 应用发布 2 功能测试&#xff1a;2.1 英文对话&#xff1a;英文输出2.2英文对话&#xff1a;英文输入&#xff1a;2.3 英文作文智能批改&#xff1…