父页面:produce.vue:第一步定义ref类型 ,然后用定义的actionSheetRef值调用子页面方法
<template>
<div>
<van-field label="规格" placeholder="请选择规格" @click="btnShow" />
//第二步 ref
<actionSheet ref="actionSheetRef" ></actionSheet >
</div>
</template>
<script setup lang="ts">
import { ref, reactive, toRefs, onMounted} from 'vue'
// //第一步定义ref类型
const actionSheetRef=ref(null)
// 规格弹出层打开的方法
const btnShow=()=>{
// 第三步 用定义的值调用子页面方法
actionSheetRef.value.updateNum()
}
</script>
子页面:actionSheet.vue
html部分:v-model绑定值
<template>
<div>
<div class="flex_align_between" style="border-top: 1px solid #eee; border-bottom: 1px solid #eee;">
<h2 class="stepper_h2">数量</h2>
<van-stepper v-model="localValue" theme="round" button-size="36" @change="numberChange" />
</div>
</template>
</div>
typescript部分:第一步: 重置为1的方法,第二步:显示抛出这个方法
<script setup lang="ts">
import { ref, reactive, toRefs, onMounted} from 'vue'
//
const localValue=ref(1)
//第一步: 重置为1的方法
const updateNum= ()=> {
localValue.value=1
}
//第二步:显示抛出这个方法
defineExpose({updateNum})
</script>