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

  • 微信直播通知怎么关闭(微信直播通知怎么恢复)

    微信直播通知怎么关闭(微信直播通知怎么恢复)

  • 华为应用市场怎么关闭纯净模式(华为应用市场怎么没有原神了)

    华为应用市场怎么关闭纯净模式(华为应用市场怎么没有原神了)

  • 华为手机型号在哪(华为手机型号在哪里查找)

    华为手机型号在哪(华为手机型号在哪里查找)

  • 苹果11支不支持nfc功能(苹果11支不支持双卡双待)

    苹果11支不支持nfc功能(苹果11支不支持双卡双待)

  • 如何设置电脑休眠时间设置(如何设置电脑休眠唤醒方式)

    如何设置电脑休眠时间设置(如何设置电脑休眠唤醒方式)

  • 小米手机更新系统后只显示mi(小米手机更新系统开不了机怎么办)

    小米手机更新系统后只显示mi(小米手机更新系统开不了机怎么办)

  • 用了淘金币如果退款会退回来吗(用了淘金币退款怎么办)

    用了淘金币如果退款会退回来吗(用了淘金币退款怎么办)

  • win加r是哪个键(window加r有什么用)

    win加r是哪个键(window加r有什么用)

  • 快手怎么发图片集(怎么在快手发送图片)

    快手怎么发图片集(怎么在快手发送图片)

  • 电信卡1x是什么意思(电信卡1x是什么网络)

    电信卡1x是什么意思(电信卡1x是什么网络)

  • 华为nova5pro和华为nova6se的区别(华为nova5pro和华为nova7哪个好)

    华为nova5pro和华为nova6se的区别(华为nova5pro和华为nova7哪个好)

  • w0rd文档怎么删除空白一页(world文档怎么删除)

    w0rd文档怎么删除空白一页(world文档怎么删除)

  • 苹果x为什么连4g网速慢(苹果x为什么连接不了wi-fi)

    苹果x为什么连4g网速慢(苹果x为什么连接不了wi-fi)

  • 快手啥叫关注页添加(快手关注入口在哪里)

    快手啥叫关注页添加(快手关注入口在哪里)

  • 怎么才能把快手星座设置空白(怎么才能把快手广告关掉)

    怎么才能把快手星座设置空白(怎么才能把快手广告关掉)

  • 黑鲨2怎么隐藏应用(黑鲨怎么隐藏手机软件)

    黑鲨2怎么隐藏应用(黑鲨怎么隐藏手机软件)

  • ie文件页面设置在哪里(ie浏览器文档模式设置)

    ie文件页面设置在哪里(ie浏览器文档模式设置)

  • 华为p30怎样关机(华为p30怎么关机)

    华为p30怎样关机(华为p30怎么关机)

  • 抖音极速版能拍视频吗(抖音极速版能拍视频吗怎么拍)

    抖音极速版能拍视频吗(抖音极速版能拍视频吗怎么拍)

  • dub al00是什么型号(dubal00是什么型号)

    dub al00是什么型号(dubal00是什么型号)

  • win10纯净版和正版区别(windows10纯净版好用吗)

    win10纯净版和正版区别(windows10纯净版好用吗)

  • 喜马拉雅为啥不能下载(喜马拉雅为啥不能评论)

    喜马拉雅为啥不能下载(喜马拉雅为啥不能评论)

  • 微信etc安装激活后就可以用了吗(微信etc安装后怎么激活)

    微信etc安装激活后就可以用了吗(微信etc安装后怎么激活)

  • 苹果x3dtouch在哪设置

    苹果x3dtouch在哪设置

  • Windows 7系统无线网卡怎么手动指定IP地址设置?(windows 7无线开关在哪里)

    Windows 7系统无线网卡怎么手动指定IP地址设置?(windows 7无线开关在哪里)

  • nntptest命令  交互式NNTP测试程序(nbtstat命令的用法)

    nntptest命令 交互式NNTP测试程序(nbtstat命令的用法)

  • 印花税5元贴花会计处理
  • 飞机发票和行程单可以一起开吗
  • 总产值和主营业务收入
  • 分公司企业所得税怎么缴纳
  • 电子银行承兑汇票已承兑已锁定
  • 财务费用做什么明细账
  • 个人负担社保
  • 长期借款工程完工时会计处理怎么做?
  • 总公司购固定资产分摊每家店面怎么来做账
  • 公司开出的经济补偿金可以税前扣除吗
  • 受托加工物资如何做账
  • 7月1日起税务新规
  • 股票期权个人所得税税率表
  • 实收资本未注明投资款
  • 开手续费发票开多了怎么做账
  • 报税提示您可能缺少相关组件怎么处理
  • 注册资本转让税率
  • 公司设备没开票维修时配件能开票吗?
  • 财报申报逾期可不可以补报
  • 搬运费没有发票能入成本吗?
  • 一般纳税人企业所得税如何计算
  • 委托贷款合同效力
  • 店铺员工证费用计入什么科目?
  • 新建厂房环评流程
  • Mac系统中使用QuickTime Player实现屏幕录像图文教程
  • win10更新21h1后很卡
  • 新产品研发费的会计分录
  • 年末一般纳税人税率表
  • Win11 Build 22000.160(KB5005189)预览版发布,更新了哪些内容
  • 财务人员如何审核招待费报销单
  • 其他业务收入属于收入吗
  • 非货币性资产交换
  • 贵的u盘和便宜的有什么区别
  • 商住房买卖过户流程
  • 年底社保怎么交
  • 车辆购置税征收对象
  • php安装swoole扩展
  • C++ Linux Web Server 面试基础篇-操作系统(四、线程通信)
  • rest for api
  • vue常用
  • php如何防止sql注入攻击
  • python中写函数
  • 企业年报网上申报入口贵州
  • 需要缴纳企业所得税的企业类型
  • 预缴所得税可以调减吗
  • 销售费用工资是什么科目
  • 库存不多
  • 新准则职工福利费包括哪些
  • 递延收益分摊是当月还是次月
  • 企业筹建期间银行开户要求
  • 公司发放工资的形式
  • 房地产开发企业增值税税率
  • 小企业会计准则2023电子版
  • 计提资产减值是好事还是坏事
  • mysql 免安装版
  • mac怎么用浏览器
  • windows的安装
  • win102h20
  • mac怎么共享网络给iphone
  • 双系统卸载deepin
  • win7升级到win10专业版教程
  • 修改etc profile
  • gzip: stdin: unexpected end of file tar: Unexpected EOF in archive tar: Unexpect
  • 基于jquery实现可定制的web在线富文本编辑器附源码下载
  • dos常用命令与批处理文件
  • css样式表实验心得
  • css position: absolute、relative详解
  • chrome version
  • windows下为啥没有观看电视的软件
  • gin项目
  • python简明
  • unity获取手机型号
  • 使用Raygun来自动追踪AngularJS中的异常
  • javascript详细介绍
  • java script课程
  • 安卓登录界面布局设计
  • python之父推荐的书
  • 北京市朝阳区地图
  • 矿产资源税怎样征收
  • 法制观念的问题
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设