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

  • vivo重绘图标怎么开启(vivo 重绘图标)

    vivo重绘图标怎么开启(vivo 重绘图标)

  • 手机突然不能快充了(手机突然不能快充了怎么办)

    手机突然不能快充了(手机突然不能快充了怎么办)

  • 怎么得到抖音卡(抖音怎么得2021卡)

    怎么得到抖音卡(抖音怎么得2021卡)

  • 华为p40pro新功能介绍(华为p40pro+功能)

    华为p40pro新功能介绍(华为p40pro+功能)

  • 快手申请退款多久能到账(快手申请退款多长时间能退回)

    快手申请退款多久能到账(快手申请退款多长时间能退回)

  • 腾讯课堂直播能投屏吗(腾讯课堂直播能防录屏吗)

    腾讯课堂直播能投屏吗(腾讯课堂直播能防录屏吗)

  • 为什么交了网费还是没网(为什么交了网费还没有网)

    为什么交了网费还是没网(为什么交了网费还没有网)

  • 充电宝归还位置满了怎么办(充电宝归还位置满了怎么办可以给开店的老板么)

    充电宝归还位置满了怎么办(充电宝归还位置满了怎么办可以给开店的老板么)

  • 微信怎么设置成白色(微信怎么设置成中国大陆)

    微信怎么设置成白色(微信怎么设置成中国大陆)

  • 微信怎么充值一卡通(微信怎么充值一卡通公交卡)

    微信怎么充值一卡通(微信怎么充值一卡通公交卡)

  • 苹果不越狱怎么下载安卓游戏(苹果不越狱怎么用kuaidial)

    苹果不越狱怎么下载安卓游戏(苹果不越狱怎么用kuaidial)

  • 相册里的照片怎么删除不掉(相册里的照片怎么转移到另一个手机)

    相册里的照片怎么删除不掉(相册里的照片怎么转移到另一个手机)

  • linux系统的主要特点(linux系统的主要组成部分)

    linux系统的主要特点(linux系统的主要组成部分)

  • 在文档中怎么画下横线(在文档中怎么画横线)

    在文档中怎么画下横线(在文档中怎么画横线)

  • 华为灭屏显示费电吗(华为手机灭屏显示浪费电吗)

    华为灭屏显示费电吗(华为手机灭屏显示浪费电吗)

  • 快手特别关注有什么用(快手特别关注有上限怎么办)

    快手特别关注有什么用(快手特别关注有上限怎么办)

  • vivo手机怎么设置sos功能(vivo手机怎么设置字体大小)

    vivo手机怎么设置sos功能(vivo手机怎么设置字体大小)

  • 手机相册打不开怎么办(手机相册打不开怎么办打开都是白屏怎么回事)

    手机相册打不开怎么办(手机相册打不开怎么办打开都是白屏怎么回事)

  • 计算机程序在什么中运行(计算机程序在什么地方运行)

    计算机程序在什么中运行(计算机程序在什么地方运行)

  • 手机淘宝怎么修改生日(手机淘宝怎么修改支付密码)

    手机淘宝怎么修改生日(手机淘宝怎么修改支付密码)

  • 手机日历怎么恢复正常(手机日历怎么恢复全屏)

    手机日历怎么恢复正常(手机日历怎么恢复全屏)

  • 抖音测身高的道具在哪(抖音上量身高的道具)

    抖音测身高的道具在哪(抖音上量身高的道具)

  • 旺旺id怎么看(怎么查看旺旺id)

    旺旺id怎么看(怎么查看旺旺id)

  • e8耳机怎么连接手机(e8耳机怎么连接手机蓝牙)

    e8耳机怎么连接手机(e8耳机怎么连接手机蓝牙)

  • 三星note10上市时间

    三星note10上市时间

  • 手机网站建设需遵守哪些规则(手机网站建设要多少钱)

    手机网站建设需遵守哪些规则(手机网站建设要多少钱)

  • 拨打的用户暂时无法接通(拨打的用户暂时无人接听是怎么回事)

    拨打的用户暂时无法接通(拨打的用户暂时无人接听是怎么回事)

  • Word文档打印时没有打印图片(word文档打印时不打印批注)

    Word文档打印时没有打印图片(word文档打印时不打印批注)

  • 如何更新PC端微信版本?(pc端微信怎么更新)

    如何更新PC端微信版本?(pc端微信怎么更新)

  • 推迟月经小窍门,两招教你如何推迟月经(推迟月经小窍门有民间土方法吗?)

    推迟月经小窍门,两招教你如何推迟月经(推迟月经小窍门有民间土方法吗?)

  • 帝国cms灵动标签如何调用模板变量(帝国cms灵动标签怎么调用)

    帝国cms灵动标签如何调用模板变量(帝国cms灵动标签怎么调用)

  • 税收的经济效应是指税收对纳税人生产
  • 别人公司过账用自己的银行卡会查吗
  • 外出经营涉税事项报告
  • 返点的保险费应计入哪里
  • 房地产定金及预收款
  • 以不动产投资入股增值税
  • 个人承包承租转包转租取得的所得
  • 怎么确认外购存货成本?
  • 收到费用发票入账后发现错误
  • 预收账款年底要确认收入吗
  • 成本法下的后续计量
  • 以前年度损益调整科目怎么用
  • 企业支付员工一年多少钱
  • 在建工程的计算公式
  • 应交税金审计
  • 应付职工薪酬存在的意义
  • 预缴的企业所得税可以扣除吗
  • 办公室租金相关法规
  • 广告公司可以开维修费吗
  • 增值税17%和13%有什么区别
  • 委托贷款利息收入现金流
  • 地方教育附加费是什么意思
  • 旅行社差额征税增值税申报表怎么填
  • 居委会有没有税收政策
  • 出租房产业务企业所得税如何处理?
  • 普票没有税号可以开票吗
  • 预付业务招待费会计分录
  • 安全生产费开工前支付
  • 21年最新cpu
  • PHP:Memcached::setMultiByKey()的用法_Memcached类
  • 股份有限公司向股东借款
  • php修改sql语句
  • 股东怎么签合同
  • cvpr2020结果
  • 有关预收账款的会计科目
  • 清洁费用是属于什么科目
  • 收据不可以入账吗
  • IIS 7.5 asp Session超时时间设置方法
  • 物业水电费可以差额征税吗
  • laravel后端
  • 销售佣金 会计分录
  • 兼职费用怎么入账报销
  • 结转损益利息收入在哪方
  • 工程类什么情况下可以三方询价
  • 资产负债表固定资产清理
  • 进出口代理的账务怎么做
  • 所得税汇算清缴调整后要账务处理吗
  • 买个人的二手车能贷款吗
  • 增值税加计扣除怎么算举例
  • 暂估入库怎么处理
  • 销售退款现金流量表
  • 支付技术转让费怎么入账
  • 部门费用的核算包括
  • 建账的要点
  • 企业开了发票
  • 无法启动diagnostic policy service服务
  • win8.1怎么改win7系统
  • 找回未保存的cad文件
  • .exe是什么软件
  • win8系统升级到win10东西还在吗
  • app隐藏库
  • centos7安装过程报错
  • linux修改22端口号
  • win8跳过开机密码
  • Win10 Mobile 10586.306提前上手视频评测
  • win8启动设置选哪个
  • math和maths哪个对
  • Extjs中DisplayField的日期或者数字格式化扩展
  • android入门书
  • 怎么做小地图
  • codeblocks使用技巧
  • andriod+nfc
  • ping大包丢包小包不丢包
  • unity中物体移动代码
  • js调用css动画
  • python自动化源码
  • 如何用python写自动化脚本
  • android混淆后怎么破解
  • 税控盘的口令密码是什么
  • 雅阁交强险和车船税多少
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设