位置: 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的安装)

  • qq性别如何隐藏(qq的性别怎么隐藏起来)

    qq性别如何隐藏(qq的性别怎么隐藏起来)

  • 小米电视怎么用爱奇艺会员(小米电视怎么用苹果手机投屏)

    小米电视怎么用爱奇艺会员(小米电视怎么用苹果手机投屏)

  • 怎样可以查询微信群被谁举报的(怎样可以查询微信转账记录明细)

    怎样可以查询微信群被谁举报的(怎样可以查询微信转账记录明细)

  • 淘宝发货不揽收怎么办(淘宝发货不揽收会自动收货吗)

    淘宝发货不揽收怎么办(淘宝发货不揽收会自动收货吗)

  • 抖音资深乐迷怎么来的(抖音资深乐迷怎么删除)

    抖音资深乐迷怎么来的(抖音资深乐迷怎么删除)

  • 怎么隐藏qq性别(怎样隐藏qq性别)

    怎么隐藏qq性别(怎样隐藏qq性别)

  • nfc一直开着危险吗(nfc一直开着危险吗 视频)

    nfc一直开着危险吗(nfc一直开着危险吗 视频)

  • WPS表格内置样式怎么设置(wps表格内置样式怎样设置)

    WPS表格内置样式怎么设置(wps表格内置样式怎样设置)

  • 卡贴机可以随意升级系统吗(卡贴机可以随意升级还原吗)

    卡贴机可以随意升级系统吗(卡贴机可以随意升级还原吗)

  • iqoov1824a是什么型号(iqoov1824a是什么手机)

    iqoov1824a是什么型号(iqoov1824a是什么手机)

  • 台式电脑有摄像头吗(台式电脑有摄像功能吗)

    台式电脑有摄像头吗(台式电脑有摄像功能吗)

  • 选中选区的快捷键(选中快捷键怎么操作)

    选中选区的快捷键(选中快捷键怎么操作)

  • 计算机硬件系统中输入设备有哪些(计算机硬件系统主要包括中央处理器存储器)

    计算机硬件系统中输入设备有哪些(计算机硬件系统主要包括中央处理器存储器)

  • qq邮箱发视频没有声音(qq邮箱发的视频为什么没有声音)

    qq邮箱发视频没有声音(qq邮箱发的视频为什么没有声音)

  • 来电提醒有几种可能(来电提醒是干什么用的)

    来电提醒有几种可能(来电提醒是干什么用的)

  • 3d渲图特别慢怎么办(3d渲染图太慢了怎么办)

    3d渲图特别慢怎么办(3d渲染图太慢了怎么办)

  • vivo拉黑名单怎么解除(vivo手机号码拉黑名单了,在哪里设置移除)

    vivo拉黑名单怎么解除(vivo手机号码拉黑名单了,在哪里设置移除)

  • amd四核处理器相当于i几(amd四核cpu性能排行)

    amd四核处理器相当于i几(amd四核cpu性能排行)

  • 文档批注在哪(文档批注哪里取消)

    文档批注在哪(文档批注哪里取消)

  • 华为超级快充动画设置(华为超级快充动画怎么样一直显示)

    华为超级快充动画设置(华为超级快充动画怎么样一直显示)

  • 苹果手机怎么卸载软件(苹果手机怎么卸载不想用的软件)

    苹果手机怎么卸载软件(苹果手机怎么卸载不想用的软件)

  • macbook怎么删照片(macbook怎么删照片没鼠标)

    macbook怎么删照片(macbook怎么删照片没鼠标)

  • 苹果11有啥功能(苹果11有什么功能是我们不知道的)

    苹果11有啥功能(苹果11有什么功能是我们不知道的)

  • 苹果几有nfc(苹果几有nfc手机型号)

    苹果几有nfc(苹果几有nfc手机型号)

  • 苹果微信怎么设置自定义提示音(苹果微信怎么设置面容解锁)

    苹果微信怎么设置自定义提示音(苹果微信怎么设置面容解锁)

  • 华为p30普通版支持反向充电吗(华为p30支持)

    华为p30普通版支持反向充电吗(华为p30支持)

  • 抖音怎么退出(抖音怎么退出群聊)

    抖音怎么退出(抖音怎么退出群聊)

  • 键盘突然打不出字怎么回事(键盘突然打不出来字)

    键盘突然打不出字怎么回事(键盘突然打不出来字)

  • 【JavaScript 进阶教程】数组新增遍历方法的说明与使用(js进阶视频教程)

    【JavaScript 进阶教程】数组新增遍历方法的说明与使用(js进阶视频教程)

  • 数字图像处理总结(冈萨雷斯版)(数字图像处理总结)

    数字图像处理总结(冈萨雷斯版)(数字图像处理总结)

  • 现金流量表和其他表的勾稽关系
  • 企业增资后需要交什么税
  • 净营业周期和营业周期
  • 个人独资企业的优缺点
  • 进口增值税电子税单抵扣
  • 搭赠的商品怎么开票
  • 其他应付款是不是长期负债
  • 房地产开发企业预收款预缴增值税
  • 借款超期不还利息的法律规定
  • 接受捐赠的材料会计分录怎么写
  • 以股权投资入股放高利贷违法吗
  • 仲裁费用计入什么会计科目
  • 固定资产发票未到怎么提折旧
  • 工资扣款的规定
  • 外派人员的一次工作总结
  • 非独立核算的分公司是法人主体吗
  • 个人承担的社保费有哪些
  • 二手房产增值税率
  • 子公司向母公司借款
  • 租赁服务可以享受加计抵减吗
  • 外币账户利息结汇
  • 税金及附加包括个人所得税吗
  • 免费样品销售给客户计入什么科目
  • 公司注销了是不是就不能用了
  • 收购免税农产品的进项税可以抵扣吗
  • mac更新系统版本
  • harmonyos2.0缺点
  • win7取消共享文件夹
  • 公司开办期间账务处理
  • 大额医疗救助金怎么申请
  • 环境保护税入账什么会计科目
  • 如何做会计分录
  • 鸿蒙系统网络差怎么解决
  • 如何配置无线路由器参数
  • 金税盘服务费怎么申报抵扣
  • 销售返点的账务怎么处理
  • 公司注册小规模有什么要求
  • 资本公积转增资本要交税吗
  • 阿里云jar包
  • ant design vue 表单
  • thinkphp配置文件
  • 无人驾驶基础知识
  • vue快速入门
  • CSDN接入AIGC辅助创作,对此你怎么看?
  • 已入账的发票跨年退回税务
  • rm 删除某个文件
  • 自产赠送视同销售的成本怎么确定
  • 微信认证费是什么意思
  • 合作社计提工资
  • 安装织梦数据库连接不上
  • 帝国cms移动端
  • 加计抵减会计分录其他收益
  • 企业电子承兑
  • 培训费 会议费
  • 哪些费用可以进研发费用
  • 调整以前月份的管理费用怎么做
  • 进项发票已经认证,对方作废了
  • mysql工作内容
  • win8.1安装失败
  • win8禁用网络之后如何开启
  • win8怎么设置开机启动项
  • window系统怎么取消开机密码
  • 苹果官网
  • mac用ntfs文件夹读写ntfs硬盘
  • linux的grep命令详解
  • windows log在哪里
  • win10 19043.1237
  • 微软发布Win10更新
  • 装载win10系统
  • 开机需要两次
  • win7 虚拟磁盘
  • shell脚本中执行echo卡住
  • 常用的批处理文件
  • cshrc语法
  • python中模块的作用
  • android多语言失效
  • 用python编写的程序称为
  • 如何查询甘肃省志愿录取状态
  • 目前长沙二手房出售信息
  • 即使我单位是免税单位,签订合同时,也需要贴
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设