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

  • 个人天猫怎么开网店
  • 季度缴纳企业所得税计算方法
  • 个人租房缴纳由谁缴纳增值税
  • 股东不任职
  • 个人接私活需要缴税吗
  • 个税负数怎么做账
  • 服务费发票税率1%
  • 企业房产税怎么申报缴纳
  • 法定盈余公积金的提取比例一般按照()
  • 当月确认收入下年怎么算
  • 跨年多计提社保个人部分怎么调整
  • 打印的电子发票需要盖章么
  • 股票红利税如何征收
  • 销售佣金的税率怎么算
  • 7月1日起税务新规
  • 个体工商户转为个人独资企业
  • 销售类合同审核要点
  • 电子税务局实名采集怎么弄
  • 票据转让后本公司还有责任吗
  • 职工教育经费列支范围及标准
  • 企业自用房产出售怎么交税
  • 企业一次性支付多年费用 不摊销
  • 退付手续费怎么操作
  • 所得税费用会计编码是什么
  • 食堂充值管理制度
  • windows11怎么回退
  • 单位代扣公积金比例
  • 部shu
  • scheduler.exe - scheduler是什么进程 有何作用
  • php字符串赋值
  • 外币交易犯法吗
  • ensmix32.exe进程安全吗 ensmix32进程是什么文件产生的
  • php商品对比功能怎么用
  • 公转私备注用途
  • 卡洛里山脉
  • 薄雾笼罩着整个森林
  • 勾选确认发票后能撤销吗
  • 安装运行所需环境怎么填
  • bootstrap easyui结合
  • flex布局教程实例篇
  • 老师不干了可以从事什么行业
  • 人类记忆存储在哪
  • 股东分红放到哪个会计科目
  • 不动产固定资产的进项税抵扣新规定
  • 减按10的税率征收个人所得税
  • 个税申报密码重置多久能用
  • 织梦百科
  • 房地产公司土地计入什么科目
  • mysql查询日志位置
  • MySQL里Create Index 能否创建主键 Primary Key
  • 权责发生制根据产品的生产特点和管理要求结转成本
  • 存货周转率是指企业某一会计
  • 如何让主营业务成本增加
  • 企业所得税法允许按规定的比例在税前扣除的准备金
  • 某企业2013年12月30日购入一台不需要安装的设备
  • 第三方平台佣金账务处理
  • 进货时的运费计入什么
  • 回收材料的好处和问题
  • 应付款多付了不可退回怎么做会计分录
  • 纳税人购进国内商品
  • 城市生活垃圾处理方式有哪几种
  • 会计做账的凭据怎么写
  • 新准则房地产企业收入确认时间
  • mysql事件调用存储过程
  • mysql -u -p -s
  • 防止黑客入侵的有效做法
  • win10系统怎么删
  • system idle process是什么进程(CPU的空闲率)
  • mac显示隐藏文件夹
  • linux 压缩包zip
  • mac文稿怎么查看字数
  • 视觉观点
  • 开通局域网共享工具
  • 猫的所有视频
  • shell 数组操作
  • jquery mobile demo
  • 自来水征税
  • 朝阳税务总局
  • 服饰类关税
  • 中俄改订条约收回哪里
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设