vue3组合式父页面调用子页面的方法

news/2024/7/9 23:42:36 标签: typescript, vue, 前端

父页面: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>


http://www.niftyadmin.cn/n/5442090.html

相关文章

从排序算法的艺术看C语言qsort函数的魅力:一场数据的时空穿越

欢迎来到白刘的领域 Miracle_86.-CSDN博客 系列专栏 C语言知识 先赞后看&#xff0c;已成习惯 创作不易&#xff0c;多多支持&#xff01; 目录 一 、回调函数 二、qsort函数 1.qsort函数排序整型数据 2.qsort函数排序结构数据 一 、回调函数 何为回调函数&#xff1…

Day 3.双向链表

双向链表 为什么在有时候销毁掉链表时会显示多销毁出一块空间&#xff1f; 定义链表的结构体类型 /* 学生信息结构体 */ typedef struct student {int id;char name[32];int score;}DATA_STU;/* 结点 */ typedef struct node {DATA_STU data;struct node *ppre; //前驱…

RPC 与 Protobuf 入门指南

一、Protobuf 数据格式简析 Protobuf 是什么&#xff1f; 在数据密集型应用领域&#xff0c;Google 开发的 Protobuf 作为一种高效数据编码方式而广受欢迎。它胜任于 JSON 及 XML 对比&#xff0c;不仅在体积和速度上表现出色&#xff0c;而且其结构化方式优化了网络传输中的…

服务器根据用途划分有哪几种?

随着企业需求的不同&#xff0c;服务器的类型也变得多种多样了&#xff0c;有根据机箱结构来划分的服务器类型&#xff0c;如机架式服务器、刀片式服务器和塔式服务器等&#xff0c;也有按照应用层次来划分的服务器类型&#xff0c;如入门级服务器和工作组服务器等。 那根据用途…

ffmpeg不常用命令整理

最近做了许多有关音视频方面的工作&#xff0c;接触了一些不常用的命令&#xff0c;整理分享出来。 1.剪辑视频 ffmpeg -ss 1 -to 4 -accurate_seek -i input.mp4 -c:v copy output.mp4指定从视频中的第1秒开始&#xff0c;到第4秒结束的部分剪辑。 ss&#xff1a;指定开始时…

深度学习500问——Chapter03:深度学习基础(4)

文章目录 3.7 预训练与微调&#xff08;fine tuning&#xff09; 3.7.1 为什么无监督预训练可以帮助深度学习 3.7.2 什么是模型微调 fine tuning 3.7.3 微调时候网络参数是否更新 3.7.4 fine-tuning模型的三种状态 3.8 权重偏差和初始化 3.8.1 全都初始化为0 3.8.2 全都初始化为…

直播预告!5位大厂测开学长学姐助力你上岸测开

大家好&#xff0c;我是洋子&#xff0c;24届春招补录&25届暑期实习招聘已经进入到白热化阶段&#xff0c;近期收到了很多同学关于求职问题的咨询&#xff0c;所以开一场公益直播来为大家答疑解惑 主题&#xff1a;校招测试开发求职如何准备&职业发展 时间&#xff1…

增强创新与复杂问题解决能力

在当前的科技和工业革命中&#xff0c;人工智能&#xff08;AI&#xff09;的角色变得尤为重要&#xff0c;特别是其在增强创新能力和解决复杂问题方面的潜力。随着深度学习和机器学习技术的持续进步&#xff0c;AI的能力不断扩展&#xff0c;正逐步成为研发团队不可或缺的一员…