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

  • 金税盘锁死日期是16号,16号能清卡吗
  • 交强险可以打折扣吗
  • 住宿发票税率有哪4种
  • 小规模纳税人销售收入会计分录
  • 子公司注销母公司合并报表处理
  • 境外机构可以开通b股账户
  • 事业单位结转资金和结余资金区别
  • 研发支出转入管理费用摘要
  • 公对公转账银行拒绝是什么意思
  • 房屋租赁合同样本书
  • 建筑企业预交增值税税务筹划案例
  • 税控技术服务
  • 水利建设基金怎么计提
  • 金税三期里有员工无工资如何申报?
  • 收到保险公司退款
  • 企业的其他业务收入
  • 企业购买的土地计入无形资产
  • 电子汇票贴现怎样操作
  • 离退休员工再任职薪酬的财税处理?
  • 向境外分配股息怎样算税额
  • 个体户能给自己交五险吗
  • 鸿蒙负一屏怎么设置
  • 发送文件桌面上显示不出来
  • 安装win7的步骤
  • vmware怎么安装iso
  • win11 zen2
  • 真三国在哪下载
  • 发行可转换优先股记入权益工具吗
  • php 数组
  • vue3技巧
  • matlab进行图像处理
  • vue全局组件和局部组件
  • 这几个sql语法的区别
  • 房产税缴纳时间点
  • wordpress修改数据库
  • 异地工作人员管理
  • Python怎么转化为中文
  • wordpress限制下载次数
  • 应付职工薪酬期末余额是什么意思
  • 股东投资款超过实收资本怎么处理
  • 冲销以前年度费用会计分录
  • 购买图书的会计账务处理
  • 应付现金股利属于什么账户
  • 调整多计提的工资
  • 以前年度损益调整借贷方向
  • 个体户是否要做账务处理
  • 保险公司代扣的车船使用税分录
  • 建筑行业如何结算工程款
  • 产品因质量问题换新质保期如何计算
  • 固定资产清理会计处理
  • 待摊费用年底能够有余额么
  • 销售做不动 应该做什么
  • 公司销售部门购买产品
  • 新担保法2021和担保期限
  • 为什么要计提工资附加费
  • ubuntu sudo apt-get install
  • mysql无法配置
  • win10升级后c盘莫名其妙满了
  • ubuntu如何配置
  • ubuntu20.04 unity
  • upskill
  • win7安全模式
  • vmware怎么配置网络
  • unity绘制曲线
  • 深入剖析kubernetes pdf
  • quick3.3 UIListview扩展应用
  • unity3d第三人称角色控制器
  • [个人学习笔记]Android 从网络获取json并解析 --Demo
  • xp系统explorer停止工作
  • nodejs模块有哪些
  • 安卓端数据库
  • 置顶什么意思啊
  • Python Requests 基础入门
  • property_get/property_set
  • 新疆干部在线网络平台登录
  • 打印发票需要什么信息
  • 怎么查询小米手机位置
  • 苹果关税多少钱一个
  • 微信 税务
  • 江苏城市规划
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设