位置: IT常识 - 正文

vue3 setup中父组件通过Ref调用子组件的方法(vue父组件怎么调用子组件的方法)

编辑:rootadmin
vue3 setup中父组件通过Ref调用子组件的方法 在setup()钩子函数中调用

推荐整理分享vue3 setup中父组件通过Ref调用子组件的方法(vue父组件怎么调用子组件的方法),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue中的父组件和子组件,vue中的父组件和子组件,vue父组件触发子组件方法,vue父组件触发子组件方法,vue中的父组件和子组件,vue3父子组件,vue中的父组件和子组件,vue父组件,内容如对您有帮助,希望把文章链接给更多的朋友!

父组件

<template><div> 我是父组件 <children ref="childrenRef" /> <button @click="handleChildren">触发子组件</button> </div></template><script lang="ts"> import { ref, defineComponent } from 'vue' import Children from './components/Children.vue'; export default defineComponent({ components: { Children } setup() { // ref的泛型除了指定any外 还可以指定<InstanceType<typeof Children>> const childrenRef = ref<any>(); const handleChildren = () => childrenRef.value.isChildren(); return { childrenRef, handleChildren } }, })</script>vue3 setup中父组件通过Ref调用子组件的方法(vue父组件怎么调用子组件的方法)

子组件:

<template><div> 我是子组件</div></template><script lang="ts"> import { defineComponent } from 'vue' export default defineComponent({ setup() { const isChildren = () => { console.log("我是子组件"); } return { isChildren, } } })</script>

如果是在setup()钩子函数中使用,父组件通过ref获取到子组件实例后,直接.value.函数名即可调用子组件所定义的函数。其中ref的泛型可以指定any和InstanceType<typeof Children>

在<srcipt setup>中调用

父组件

<template><div> 我是父组件 <children ref="childrenRef" /> <button @click="handleChildren1">触发子组件1</button> <button @click="handleChildren2">触发子组件2</button> </div></template><script setup lang="ts"> import { ref } from 'vue' import Children from './components/Children.vue'; const childrenRef = ref<InstanceType<typeof Children>>(); const handleChildren1 = () => childrenRef.value?.isChildren(); const handleChildren2 = () => childrenRef.value?.isChildren2();</script>

子组件

<template> <div> 我是子组件 </div></template><script setup lang="ts"> import { defineExpose } from 'vue'; const isChildren = () => { console.log("我是子组件的第一个方法"); } const isChildren2 = () => { console.log("我是子组件的第二个方法"); } defineExpose({ isChildren, isChildren2 })</script>

在<srcipt setup>中调用和setup()钩子函数中调用不同的是:子组件中要通过defineExpose将方法暴露给父组件。

📃官网说明地址

本文链接地址:https://www.jiuchutong.com/zhishi/293755.html 转载请保留说明!

上一篇:推荐国内免费使用chatGPT的工具(推荐国内免费使用的电影)

下一篇:MySQL+Navicat安装配置教程(超级详细、保姆级)(navicat的安装)

  • 荣耀gspro怎么升级鸿蒙(荣耀gspro怎么升级10.1版吗)

    荣耀gspro怎么升级鸿蒙(荣耀gspro怎么升级10.1版吗)

  • 微信怎样举报让他永久封号呢(微信如何举报别人百分百成功)

    微信怎样举报让他永久封号呢(微信如何举报别人百分百成功)

  • qq扩列语音连麦怎么没有了(qq扩列语音连麦为什么匹配失败)

    qq扩列语音连麦怎么没有了(qq扩列语音连麦为什么匹配失败)

  • 微信公众号草稿恢复(微信公众号草稿箱继续编辑后怎样发送)

    微信公众号草稿恢复(微信公众号草稿箱继续编辑后怎样发送)

  • 小米10没信号(小米10没信号后不能自己恢复)

    小米10没信号(小米10没信号后不能自己恢复)

  • 个人订阅号怎么挣钱(个人订阅号怎么转成企业订阅号)

    个人订阅号怎么挣钱(个人订阅号怎么转成企业订阅号)

  • 华为nova7新手机第一次充电多长时间(华为nova7新手机多少钱)

    华为nova7新手机第一次充电多长时间(华为nova7新手机多少钱)

  • 户户通001信号中断怎么办(户户通001信号中断客服电话)

    户户通001信号中断怎么办(户户通001信号中断客服电话)

  • 畅连通话要钱吗(畅连通话要付费吗)

    畅连通话要钱吗(畅连通话要付费吗)

  • 华为8x屏幕多大尺寸(华为8x屏幕多大)

    华为8x屏幕多大尺寸(华为8x屏幕多大)

  • qq群里下载文件别人会知道吗(qq群下载文件别人知道吗)

    qq群里下载文件别人会知道吗(qq群下载文件别人知道吗)

  • hd是什么意思中文(hd 是什么意思)

    hd是什么意思中文(hd 是什么意思)

  • 和我信为什么领不了流量(和我信为什么不见了)

    和我信为什么领不了流量(和我信为什么不见了)

  • 手机结构光是什么(华为手机结构光)

    手机结构光是什么(华为手机结构光)

  • 日期的横线怎么打(日期的横线怎么打手机版)

    日期的横线怎么打(日期的横线怎么打手机版)

  • oppoFindx有呼吸灯吗(oppo findx2呼吸灯)

    oppoFindx有呼吸灯吗(oppo findx2呼吸灯)

  • 黑鲨烧鸡模式如何开启(黑鲨2pro烧鸡模式怎么开)

    黑鲨烧鸡模式如何开启(黑鲨2pro烧鸡模式怎么开)

  • 探探会员有什么用(探探会员有什么权益)

    探探会员有什么用(探探会员有什么权益)

  • ipad air3支持快充吗(ipadair3可以用快充充电吗)

    ipad air3支持快充吗(ipadair3可以用快充充电吗)

  • word文档单页横向(word文档单页横版竖版如何切换)

    word文档单页横向(word文档单页横版竖版如何切换)

  • 手机无线网有个感叹号(手机无线网有个感叹号怎么解决)

    手机无线网有个感叹号(手机无线网有个感叹号怎么解决)

  • 应用程序无法正常启动0xc000012d解决方法(应用程序无法正常启动(0xc0000142))

    应用程序无法正常启动0xc000012d解决方法(应用程序无法正常启动(0xc0000142))

  • mac双系统怎么删除一个?苹果mac双系统删除win7方法图文步骤(mac双系统怎么删除win系统)

    mac双系统怎么删除一个?苹果mac双系统删除win7方法图文步骤(mac双系统怎么删除win系统)

  • win10清空回收站提示音怎么设置? 解决win10清空回收站没有声音(win10清空回收站是灰色的)

    win10清空回收站提示音怎么设置? 解决win10清空回收站没有声音(win10清空回收站是灰色的)

  • 所得税费用会计分录
  • 税务ukey与税控盘的区别
  • 财会英语汇总:税收术语?
  • 税收的基本特征包括?
  • 高速公路通行费电子发票怎么打印
  • 8月现金收入9月存银行如何做账
  • 红字专用发票信息表用什么纸打印
  • 为员工购买商业保险专票可以抵扣吗
  • 财务合理化建议例子
  • 企业收到的土地补偿款的企业所得税
  • 所得税纳税申报表在哪里打印
  • 工作未满12个月被辞退时前月平均工资怎么计算
  • 固定资产计提折
  • 建筑工程公司项目经理职责
  • 工程类什么情况下可以三方询价
  • 公司进项票不够怎么回事
  • 小规模纳税人可以出口退税吗
  • 企业交的社保是什么
  • 小规模纳税人普票可以开3%吗
  • 税务局领普通发票需要多少钱
  • 注销往来怎么清理
  • 客户不结款怎么办,出结款通知单
  • 以前年度加计扣除的税
  • 工业企业销售管理制度
  • 下月初认证的发票怎么开
  • 国税地税纳税申报
  • 跨省银行承兑汇票可以接受吗
  • 社保会计分录怎么写
  • 不附追索权的票据包括
  • thinkphp 模型
  • nclaunch.exe - nclaunch进程有什么用 是什么意思
  • 企业常见的涉税风险
  • 企业为员工提供服务要交增值税吗
  • 建筑业挂靠经营行为有什么涉税风险?
  • 基于springboot的毕设
  • vue侧边栏导航,右侧显示对应内容
  • 提取法定盈余公积会计科目
  • python中 =是什么意思
  • 如何区分误餐费和补助费
  • reactjs.org
  • 代理付银行手续费合法吗
  • mysql怎么处理特殊字符数据
  • 出口退税率为0要补增值税吗
  • 公司借款利息可以约定由某一股东承担
  • 完税证明能作为抵扣凭证吗
  • 税务安全证书应用客户端不成功是什么意思
  • 企业残障金缴纳标准
  • 外贸企业出口货物会计分录
  • 管理费用的是
  • 盈余公积分配现金股利分录
  • 建筑行业挂靠代扣税款如何入账?
  • 付款退回在现金里怎么查
  • 公司购买银行理财产品怎么做账
  • 汽车销售公司代购汽车有风险吗
  • 错误原始凭证怎么写
  • 利润总额与应纳税所得额的差异国内动态
  • centos6yum源
  • 电脑win7win8win10操作系
  • 播放器状态
  • mac怎么一键关机
  • cmos密码是什么
  • windows7创建新桌面
  • surface rt升级win10详细教程
  • win10推送win11
  • win7系统局域网无法看到其他电脑
  • win8宽带错误651最简单解决方法
  • win7打不开任务栏
  • macos unity
  • Python3.6 Schedule模块定时任务(实例讲解)
  • OpenGL ES Emulator比较
  • angularjs定义全局变量
  • dos命令chkdsk
  • android ios UI
  • [置顶] 快来貌相则不达很好skmzx5
  • dom操作的方法
  • 广东电子税务局手机版
  • 个人所得税申诉有什么后果
  • 陕西地方水利建设基金减免政策2023
  • 财税36号文附件3
  • 关税税率表包括哪些
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设