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

  • 荣耀平板v7pro机身尺寸(荣耀平板v7 polo)

    荣耀平板v7pro机身尺寸(荣耀平板v7 polo)

  • 淘宝显示商品已下单是什么意思(淘宝显示商品已限购什么意思)

    淘宝显示商品已下单是什么意思(淘宝显示商品已限购什么意思)

  • 爱奇艺下载视频怎么保存到本地(爱奇艺下载视频怎么导出)

    爱奇艺下载视频怎么保存到本地(爱奇艺下载视频怎么导出)

  • 电脑息屏怎么唤醒

    电脑息屏怎么唤醒

  • 网线被剪断了怎么办(网线被剪断了怎么办打什么电话)

    网线被剪断了怎么办(网线被剪断了怎么办打什么电话)

  • amd3600x相当于i几(amd3600x性能怎么样)

    amd3600x相当于i几(amd3600x性能怎么样)

  • 荣耀20i支持多少w快充(荣耀20i支持多少充电)

    荣耀20i支持多少w快充(荣耀20i支持多少充电)

  • 华为只能充60的电怎么解决啊(华为手机电池只能充60的电)

    华为只能充60的电怎么解决啊(华为手机电池只能充60的电)

  • 微信应急联系人有什么用(微信应急联系人的作用)

    微信应急联系人有什么用(微信应急联系人的作用)

  • 摄像头显示设备离线怎么回事(摄像头显示设备不在线怎么办)

    摄像头显示设备离线怎么回事(摄像头显示设备不在线怎么办)

  • 苹果什么手机支持5g(苹果什么手机支持磁吸充电)

    苹果什么手机支持5g(苹果什么手机支持磁吸充电)

  • 华为b19是什么型号(华为b19b)

    华为b19是什么型号(华为b19b)

  • 苹果音乐不付费能用吗(苹果音乐不付费怎么设置)

    苹果音乐不付费能用吗(苹果音乐不付费怎么设置)

  • wps怎么变成文本格式(wps怎么改成文本格式)

    wps怎么变成文本格式(wps怎么改成文本格式)

  • 华为p30是什么系统(华为p30pro上市价格)

    华为p30是什么系统(华为p30pro上市价格)

  • 小米8夜光屏用来干嘛(小米手机夜光屏有什么用)

    小米8夜光屏用来干嘛(小米手机夜光屏有什么用)

  • vivo双卡只显示一个(vivo双卡显示流量信息怎样设置不滚动)

    vivo双卡只显示一个(vivo双卡显示流量信息怎样设置不滚动)

  • 小米云台版摄像头怎么连接手机(小米云台版摄像头连接不上)

    小米云台版摄像头怎么连接手机(小米云台版摄像头连接不上)

  • 怎么调路灯自动定时器(路灯怎么调定时)

    怎么调路灯自动定时器(路灯怎么调定时)

  • 嗨来电锁屏新闻怎么关(手机设置来电秀锁屏老是出现广告怎么办)

    嗨来电锁屏新闻怎么关(手机设置来电秀锁屏老是出现广告怎么办)

  • 小米手环3丢了怎么找回(小米手环3丢了公交卡怎么办)

    小米手环3丢了怎么找回(小米手环3丢了公交卡怎么办)

  • 闲鱼验机拆机吗(闲鱼验机拆机吗?)

    闲鱼验机拆机吗(闲鱼验机拆机吗?)

  • 苹果6home键在哪里设置(苹果8home键在哪)

    苹果6home键在哪里设置(苹果8home键在哪)

  • siri耗电吗(siri耗电多吗)

    siri耗电吗(siri耗电多吗)

  • win10一段时间不用网络就掉线连不上怎么办两种解(win10一段时间不动黑屏)

    win10一段时间不用网络就掉线连不上怎么办两种解(win10一段时间不动黑屏)

  • js去掉两个数组相同的元素、js删除数组中某一个对象、js快速查找数组中重复项下标(js去掉数组中的空字符串)

    js去掉两个数组相同的元素、js删除数组中某一个对象、js快速查找数组中重复项下标(js去掉数组中的空字符串)

  • CentOS利用telnet命令检测IP端口的命令方法(centos8 telnet)

    CentOS利用telnet命令检测IP端口的命令方法(centos8 telnet)

  • 代扣代缴个人所得税如何做账
  • 业务宣传费和广告费的扣除标准
  • 银行理财产品的特点
  • 企业审计费入什么科目
  • 信息技术服务费计入什么会计科目
  • 预算管理的方法及应用
  • 公司长期应付账款怎么算
  • 税务局每年都会查我公司虚开发票
  • 企业税审要钱吗
  • 最近偷税女星都有谁
  • 企业出租屋顶不需要缴税!
  • 当年亏损可以用以前年度来弥补吗
  • 营改增的销售额规定
  • 固定资产清理会计处理例题
  • 工资退税手续需要多久
  • linux多线程运行
  • 全民游戏盒子怎么卸载
  • 在windows 10中任务栏()
  • windows已禁用
  • 减免税额科目有没有余额
  • 上月多计提的税金及附加怎么办
  • 固定资产进项税额一次性抵扣
  • thinkphp i方法
  • PHP:zip_entry_compressedsize()的用法_Zip函数
  • 减免活动怎么做
  • 公司交纳社会保险多少钱
  • 城建税减征50%
  • vmware vmtools
  • 工作服钱可否收取
  • 福利费计入科目
  • 非居民纳税人工资个人所得税税率
  • mongodb import
  • 结息会计凭证怎么写
  • 固定资产折旧费用的账务处理
  • 核定征收的企业所得税怎么算
  • 房租收入如何缴纳增值税
  • 电力行业规定
  • 一般纳税人证明在哪里开具
  • 上年多计提的费用,今年如何记账
  • 可抵扣暂时性差异产生的情况有
  • 会计信息不采集可以考初级吗
  • 营改增后建筑业增值税税率
  • 利用公式计算填空题
  • mysql检查表是否存在
  • mysql的json数据类型
  • SQLserver导入Excel文件到表
  • windows安全保护
  • 32位win7系统多大?
  • xp系统关机界面设置
  • linux命令放在哪个路径
  • 亲测可用抖音低价单赚派费项目
  • mac如何查看隐藏的文件夹
  • windowsxp怎么卸载
  • linux系统bug
  • window7窗口
  • linux纯文本浏览器
  • 电脑win8.1系统怎么样
  • g++编译debug
  • gnu grub卸载
  • ssh用法及命令
  • win7旗舰版64位系统开机时软件设置自动启动详细图文教程
  • win7中Windows Time时间服务错误1060怎么办?
  • unity性能优化工具
  • 摄像头挡住了
  • cocos2dx怎么安装
  • 自动释放池原理,本质
  • opengl详解
  • 简述matlab中控制系统的数学描述类型
  • pygame csdn
  • unity只执行一次的方法
  • js实现表格动态合并单元格
  • 税务申报热线电话
  • 企业年金个人缴费比例越高越好吗
  • 申请电子发票需要盖章吗
  • 手表关税多少
  • 苏州社保代缴机构查询
  • 税服领花规范照片
  • 河南省优秀班主任2022
  • 税务局监控个人账户流程
  • 税务筹划企业所得税案例分析题
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设