vue3父组件调用子组件中的方法

标签：function 调用 defineExpose vue3 组件 queryOrder ZhuJianLiuChengDan

子组件中

<script setup>
function queryOrder() {

...代码省略
}

//使用 <script setup> 的组件是默认关闭的——即通过模板引用或者 $parent 链获取到的组件的公开实例，
//不会暴露任何在 <script setup> 中声明的绑定。defineExpose可以将方法主动暴露出来
defineExpose({
    queryOrder,
})
</script>

父组件中

<template>

  <van-button type="primary" @click="chaxun" :loading="chaXunLoading" :disabled="chaXunLoading">查詢</van-button>

 <ZhuJianLiuChengDan 
                   :lotnum="lotnum"
                   :userid="userid"
                   :isDisplay="isDisplay"
                   :com_LiaoHao="com_LiaoHao"
                   :com_BanBen="com_BanBen"
                   :com_TuXu="com_TuXu"
                   :com_CengBie="com_CengBie"
                   ref="zjlcdRef"
                   ></ZhuJianLiuChengDan>
</template>
<script>
export default {
    name: 'order',
    components: {
        ZhuJianLiuChengDan,
    }
}
</script>
<script setup>
import ZhuJianLiuChengDan from './ZhuJianLiuChengDan.vue'
const zjlcdRef=ref(null);
//流程单查询
 function chaxun() {
    //流程單
    zjlcdRef.value.queryOrder();
};
</script>

　　

标签：function,调用,defineExpose,vue3,组件,queryOrder,ZhuJianLiuChengDan
From： https://www.cnblogs.com/gcy1987/p/16892303.html