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

  • 微信相册里的视频怎么删除(微信相册里的视频怎么隐藏)

    微信相册里的视频怎么删除(微信相册里的视频怎么隐藏)

  • 蓝奏云手机上怎么注册(蓝奏云手机怎么解压)

    蓝奏云手机上怎么注册(蓝奏云手机怎么解压)

  • 苹果手表5如何设置睡眠监测(苹果手表5如何省电)

    苹果手表5如何设置睡眠监测(苹果手表5如何省电)

  • 创建facebook账号时显示网络出错(创建facebook账号卡在创建密码)

    创建facebook账号时显示网络出错(创建facebook账号卡在创建密码)

  • iphone8p处理器是a几(iphone8p处理器是A几)

    iphone8p处理器是a几(iphone8p处理器是A几)

  • 手机打不出去电话能接电话(手机打不出去电话了怎么回事)

    手机打不出去电话能接电话(手机打不出去电话了怎么回事)

  • 淘宝系统繁忙购买失败什么意思(淘宝系统繁忙无法购买)

    淘宝系统繁忙购买失败什么意思(淘宝系统繁忙无法购买)

  • 表格所有内容水平居中怎么设置(表格所有内容水平居中并设置表格底纹)

    表格所有内容水平居中怎么设置(表格所有内容水平居中并设置表格底纹)

  • 充电仓充电时耳机要不要拿出(充电仓充电时耳机可以拿出吗)

    充电仓充电时耳机要不要拿出(充电仓充电时耳机可以拿出吗)

  • 三星s10黑屏了什么情况(三星s10手机黑屏打不开)

    三星s10黑屏了什么情况(三星s10手机黑屏打不开)

  • 钉钉看回放快进老师知道吗(钉钉看回放快进老师可以知道观看时长吗)

    钉钉看回放快进老师知道吗(钉钉看回放快进老师可以知道观看时长吗)

  • 西瓜视频注销账号审核要多久(西瓜视频注销账号 多久可以注册)

    西瓜视频注销账号审核要多久(西瓜视频注销账号 多久可以注册)

  • 网易云音乐注销账号后别人能看到什么(网易云音乐注销的账号还可以找回吗)

    网易云音乐注销账号后别人能看到什么(网易云音乐注销的账号还可以找回吗)

  • iphonexsmax满电可以用多久(xsmax满电一直玩能用多久)

    iphonexsmax满电可以用多久(xsmax满电一直玩能用多久)

  • 微博能看到具体访客吗(微博能看到具体访客人么)

    微博能看到具体访客吗(微博能看到具体访客人么)

  • 笔记本backspace没反应(笔记本backspace键删除不了是什么原因)

    笔记本backspace没反应(笔记本backspace键删除不了是什么原因)

  • 小米8青春版支持多少w快充(小米8青春版支持电信卡吗)

    小米8青春版支持多少w快充(小米8青春版支持电信卡吗)

  • 苹果11怎么选择卡发信息(苹果11怎么选择副号打电话)

    苹果11怎么选择卡发信息(苹果11怎么选择副号打电话)

  • 万里通积分怎么用(万里通积分怎么在京东购物)

    万里通积分怎么用(万里通积分怎么在京东购物)

  • iphone8p指纹解锁没反应(iPhone8p指纹解锁一直跳)

    iphone8p指纹解锁没反应(iPhone8p指纹解锁一直跳)

  • ps色彩范围(ps色彩范围在哪个菜单栏)

    ps色彩范围(ps色彩范围在哪个菜单栏)

  • 华为p30pro型号(华为p30pro型号怎么是vog-al00)

    华为p30pro型号(华为p30pro型号怎么是vog-al00)

  • 微信没绑卡收不了红包怎么办(微信没绑卡收不了零钱了咋办)

    微信没绑卡收不了红包怎么办(微信没绑卡收不了零钱了咋办)

  • AMD锐龙R5-1400配1050ti玩网游怎么样,会翻车吗?(amdr5 1400)

    AMD锐龙R5-1400配1050ti玩网游怎么样,会翻车吗?(amdr5 1400)

  • 商场购物卡的会员怎么用
  • 向税务局申请发票增量增额怎么写
  • 企业会计制度固定资产保险费
  • 小规模企业所得税多少
  • 工会费缴纳基数
  • 应付账款对方不催款怎么办
  • 车间购买灯会计怎么做账
  • 购买金税盘需要带什么
  • 资本公积账务
  • 没有发票如何报账
  • 隔月发票红冲,交税怎么交
  • 新成立的公司银行存款如何入账
  • 凭证可以部分冲销吗
  • 国地税联合财务报表小规模企业需要报送的吗?
  • 个人去税务局开劳务发票要交多少税
  • 小规模纳税人国企
  • 海关缴款书抵扣怎么做账
  • 企业员工差旅平台排行
  • 发生的费用发票会计分录
  • 进口车辆购置税公式
  • 农产品零税率
  • 出口退免税资格备案
  • win11 分区
  • 收到别的公司对公转账往来
  • 其他应付款计入什么科目
  • vmware10虚拟机安装
  • 有一个设置
  • window10自带商店下载位置
  • linux不允许root登录
  • PHP:oci_fetch_object()的用法_Oracle函数
  • 报废汽车残值收入的商品编码编码
  • CI(Codeigniter)的Setting增强配置类实例
  • 营业税的滞纳金如何计算
  • 缴纳以前年度房产税会计分录
  • php对象的概念
  • 股权置换和股权转让
  • 付出对价的公允
  • 表单验证方法一般有哪几种
  • php微信公众号开发反回图片怎么弄的学校
  • 金融企业贷款损失税前扣除
  • 非税收入定额票据可以报销吗去什么地方报销
  • 个体工商户个税优惠政策2023
  • 法人名称是什么意思
  • 发票的规格型号有字数限制吗
  • 进项税额转出会计分录
  • 长期待摊的装修费什么时候入账
  • 常见数据库系统软件
  • 稳岗补贴属于是什么补贴
  • 为什么收款金额跟实时入帐金额会不一样农村信用社
  • 建账盘存库存商品的分录
  • 收到营业外收入政府补贴的会计分录
  • 工商年报纳税总额从哪看
  • 多计提企业所得税怎么冲回
  • 税控技术服务费会计分录
  • 收到发票未抵扣,收票方也可以开红字信息表吗?
  • 公司做的形象墙效果图
  • 货物赔偿款怎么做账
  • 信用减值损失科目代码6702
  • 企业研发费用怎么证明
  • 实收资本相关认定
  • 公司支票可以进私人账户吗有限额吗
  • 系统存储过程以什么开头
  • win7与vista关系
  • linux服务器常用命令
  • windowsxp优化教程
  • windows 如何解密
  • scrollpane.setviewportview
  • ExtJs 3.1 XmlTreeLoader Example Error
  • gradle手动安装
  • python多线程例子
  • 浅析jQuery Ajax请求参数和返回数据的处理
  • jquery validator
  • python异常处理的关键词
  • 国家税务系统
  • 宁波地税如何网上缴费
  • 税务系统怎么修改办税人
  • 纳税人被列入非正常户超过三个月的情况
  • 国家税务总局资阳市雁江区税务局
  • 三种人不交个人所得税?
  • 税收与税务的区别是什么
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设