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

子组件中

<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>

  

posted @ 2022-11-15 14:18  v流年v  阅读(2105)  评论(0)    收藏  举报