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

  • oppok9pro怎么设置返回键(OPPOk9Pro怎么设置灵动岛)

    oppok9pro怎么设置返回键(OPPOk9Pro怎么设置灵动岛)

  • 浏览器扫码在哪里打开(浏览器扫码在哪里打开华为)

    浏览器扫码在哪里打开(浏览器扫码在哪里打开华为)

  • xbox无法登录账户(xboxones无法登陆账户)

    xbox无法登录账户(xboxones无法登陆账户)

  • 小红书私信发微信号会被屏蔽吗(小红书私信发微信二维码会被屏蔽吗)

    小红书私信发微信号会被屏蔽吗(小红书私信发微信二维码会被屏蔽吗)

  • 抖音重复播放算次数吗(抖音重复播放会重复消耗流量吗)

    抖音重复播放算次数吗(抖音重复播放会重复消耗流量吗)

  • 移动路由器注册灯一直闪(移动路由器注册灯一直亮怎么回事)

    移动路由器注册灯一直闪(移动路由器注册灯一直亮怎么回事)

  • qq待办提醒是什么意思(qq消息待办提醒什么意思)

    qq待办提醒是什么意思(qq消息待办提醒什么意思)

  • 微信一天可以加多少好友不封号(微信一天可以加多少人不会频繁)

    微信一天可以加多少好友不封号(微信一天可以加多少人不会频繁)

  • raid6需要几块硬盘(raid6需要几个驱动器)

    raid6需要几块硬盘(raid6需要几个驱动器)

  • 苹果怎么下载软件不用输密码(苹果怎么下载软件不用app store)

    苹果怎么下载软件不用输密码(苹果怎么下载软件不用app store)

  • ipad充电要多久(苹果14第一次充电要充多久)

    ipad充电要多久(苹果14第一次充电要充多久)

  • ipad插卡版能连wifi吗(ipad插卡版可以连接无线网吗)

    ipad插卡版能连wifi吗(ipad插卡版可以连接无线网吗)

  • 如何删除华为云空间照片(如何删除华为云空间里面的内容)

    如何删除华为云空间照片(如何删除华为云空间里面的内容)

  • 怎样删除抖音喜欢的作品(怎样删除抖音喜欢列表)

    怎样删除抖音喜欢的作品(怎样删除抖音喜欢列表)

  • 全屏幕怎么设返回键(全面屏幕怎么返回)

    全屏幕怎么设返回键(全面屏幕怎么返回)

  • 音响和音箱的区别(音响和音箱的区别,选择适合你的)

    音响和音箱的区别(音响和音箱的区别,选择适合你的)

  • 手机ipv6网络是什么(手机ipv6功能重要吗)

    手机ipv6网络是什么(手机ipv6功能重要吗)

  • 如何看微信玩多长时间(怎么知道微信玩了多少天)

    如何看微信玩多长时间(怎么知道微信玩了多少天)

  • 热点连接成功上不了网(热点链接后不能上网怎么回事)

    热点连接成功上不了网(热点链接后不能上网怎么回事)

  • 华为钱包门禁卡用不了(华为钱包门禁卡模拟成功但是打不开)

    华为钱包门禁卡用不了(华为钱包门禁卡模拟成功但是打不开)

  • 乐速通怎么充值(乐速通怎么充值不了)

    乐速通怎么充值(乐速通怎么充值不了)

  • 微信钱包账单删除怎么恢复(微信钱包账单删除了可以找回来吗)

    微信钱包账单删除怎么恢复(微信钱包账单删除了可以找回来吗)

  • vivox27升降摄像头怎么开(vivox27升降摄像头拆解安装)

    vivox27升降摄像头怎么开(vivox27升降摄像头拆解安装)

  • python中argparse库是什么(python3 argparse)

    python中argparse库是什么(python3 argparse)

  • 增值税专用发票几个点
  • 已付预付款当月应付金额怎么填写?
  • 停车费定额发票税率
  • 通过公账直接转账可以吗
  • 小企业会计制度及核算办法
  • 为什么租赁只能20年
  • 退休工资要缴纳税吗
  • 延期缴纳税款的审批机关是
  • 证券公司转让价格
  • 新成立公司注资流程
  • 互联网合同范本
  • 个人出租房屋税率表2023年
  • 原始凭证分割单可以税前扣除吗
  • 固定资产差额
  • 无偿划转房产能否入递延收益
  • 企业买房可以抵扣多少税
  • 应付账款转营业外收入需要什么条件
  • win10专业版技巧
  • 企业在运行过程中会遇到哪些法律问题
  • 暂估成本的会计处理
  • 王者荣耀电脑版怎么键盘操作
  • windows11怎么设置默认应用
  • java开发主流框架
  • icqlite.exe进程的详细介绍 icqlite进程的查询 作用是什么
  • php yii框架
  • uniapp页面loading
  • map程序
  • 公司收到补偿款是利好还是利空
  • yii2框架运行原理
  • 企业可以超范围经营吗
  • 企业清算分配的财产金额怎么算出来
  • php删除数组中指定元素
  • yii2框架中文手册
  • 旅行社差额征税税率是多少
  • 使用服务器
  • 红字发票账务处理
  • nohup命令挂不上 每次都直接退出
  • vgchange命令
  • 企业的研发支出
  • 挂靠方项目部账务是否并入被挂靠方公司账务?
  • 购买研发设备可以直接列入研发开支不
  • 配送中心适合哪种类型的企业
  • mongodb 随机获取一条数据
  • php判断数据库用户名是否存在
  • 固定资产怎么确定折旧年限
  • 暂估入库没开发票怎么办
  • 业务招待费进项票可以抵扣吗
  • 捆绑销售如何做会计处理合适?
  • 货款尚未收到增值税
  • 银行贴息一般多久能到账
  • 实发工资有小数点是如何解决的
  • 生产用品采购怎么购买的
  • 增值税发票抵扣期限是多久
  • 什么情况下可以待岗
  • 年度损益调整的会计分录
  • 聘用残疾人优惠政策
  • 办理分公司的流程样本
  • 失控发票进项税转出企业无法承担所得税怎么办
  • 企业办理增资的程序
  • 哪些资产减值损失确认过后是可以转回的
  • 建账时必须输入的内容有哪些
  • cndll.dll
  • centos设置终端快捷键
  • SUSE Linux Enterprise Server 设置防火墙开启ssh远程端口的方法
  • win101903更新安装失败
  • Linux VPS vsftp/proftpd FTP时间差八小时的解决方法
  • 简述android多线程编程的实现方式
  • javascript entries
  • js 括号函数
  • 批处理列出文件名
  • javascript基础入门视频教程
  • 安卓手机管家怎么关闭
  • jquery获取指定元素
  • eclipse自动生成
  • python 包 __init__
  • 税务认证系统如何操作
  • 广东税务查询系统
  • 重庆办理4050社保需要什么材料
  • 立信金融会计学院
  • 城市建设维护税减免政策
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设