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

  • 企业信息公示系统更新时间规律

    企业信息公示系统更新时间规律

  • 如何更改无线路由器名称和密码(如何更改无线路由器密码)(如何更改无线路由器信道)

    如何更改无线路由器名称和密码(如何更改无线路由器密码)(如何更改无线路由器信道)

  • 小米闻声是干什么用的(miui闻声)

    小米闻声是干什么用的(miui闻声)

  • 支付宝蚂蚁森林换树的形象怎么弄(支付宝蚂蚁森林能量对照表)

    支付宝蚂蚁森林换树的形象怎么弄(支付宝蚂蚁森林能量对照表)

  • 微信上自己的健康通行码怎么打印(微信上自己的健康码怎么删除)

    微信上自己的健康通行码怎么打印(微信上自己的健康码怎么删除)

  • wps发送文档咋是个问号(wps发送文档咋是乱码了)

    wps发送文档咋是个问号(wps发送文档咋是乱码了)

  • 蜂鸟众包注销后多久可以注册(蜂鸟众包注销后多久可以注册是新人么)

    蜂鸟众包注销后多久可以注册(蜂鸟众包注销后多久可以注册是新人么)

  • 微信背景图灰色是被删了吗(微信背景图灰色不能点赞)

    微信背景图灰色是被删了吗(微信背景图灰色不能点赞)

  • 目前世界上最大的计算机互联网络是什么(目前世界上最大的能源消费国是)

    目前世界上最大的计算机互联网络是什么(目前世界上最大的能源消费国是)

  • 苹果xs可以用5g网络吗(苹果xs可以用5g卡使用4g)

    苹果xs可以用5g网络吗(苹果xs可以用5g卡使用4g)

  • 华为手机如何关闭畅连通话(华为手机如何关闭发现页)

    华为手机如何关闭畅连通话(华为手机如何关闭发现页)

  • 华为mate30左上角显示HD(华为mate30左上角的小洞)

    华为mate30左上角显示HD(华为mate30左上角的小洞)

  • 嗨来电软件安全吗(嗨来电会不会泄露个人信息)

    嗨来电软件安全吗(嗨来电会不会泄露个人信息)

  • 新电脑充电要注意什么(新电脑 充电)

    新电脑充电要注意什么(新电脑 充电)

  • 固态硬盘怎么固定在机箱上(固态硬盘怎么固定在机箱)

    固态硬盘怎么固定在机箱上(固态硬盘怎么固定在机箱)

  • 为什么快车要预付车费(为什么打快车要先给钱)

    为什么快车要预付车费(为什么打快车要先给钱)

  • 探探手机号换了要验证码怎么办(探探手机号换了收不到验证码怎么办)

    探探手机号换了要验证码怎么办(探探手机号换了收不到验证码怎么办)

  • 抖音怎么一直显示网络不给力(抖音怎么一直显示昨天在线)

    抖音怎么一直显示网络不给力(抖音怎么一直显示昨天在线)

  • 设备信息权限怎么开启(设备信息权限怎么设置的)

    设备信息权限怎么开启(设备信息权限怎么设置的)

  • 小米9防水级别(小米9防水级别怎么区分)

    小米9防水级别(小米9防水级别怎么区分)

  • win10电源模式最佳性能如何设置详细教程(win10电源模式最佳性能多耗好多电)

    win10电源模式最佳性能如何设置详细教程(win10电源模式最佳性能多耗好多电)

  • 最高频率的内存是什么(最高频率内存条是多少)

    最高频率的内存是什么(最高频率内存条是多少)

  • 吸收合并的税务问题
  • 化妆品销售公司简介
  • 工商年报已报网上还查不出来
  • 增值税不用交还要计提吗
  • 其他个人出租房屋按照多少征收应纳税额
  • 公允价值变动损益影响营业利润吗
  • 如何自己开小公司
  • 税务局的信用等级是多少
  • 发票打印格式错误
  • 新个税聘用退休后怎么算
  • 股东出资方式和比例是否合法?并说明理由
  • 企业个人完税证明怎么开
  • 申报进项税额
  • 加班工资算做个月工资吗
  • 电子发票截图可以吗
  • 母公司如何将子公司转让
  • 工资是一定是月薪吗
  • 日常服务app
  • 电子发票会计怎么记账
  • deepin20.1怎么样
  • 周转材料月末有余额吗
  • 子公司代总公司付款
  • 药品推广服务费怎么开票
  • 费用已付款跨年怎么做账
  • 公司注销职工安置方案
  • 进项发票抵扣途中怎么办
  • PHP简单实现HTTP和HTTPS跨域共享session解决办法
  • 农村土地承包经营权证丢失怎么补办
  • 应交税金及附加包括哪些
  • 可视化思考
  • vscode nasm
  • win11更新22468
  • 查看ls命令的使用手册
  • 微信公众平台官网
  • 固定资产盘盈的账务处理
  • 新会计准则对财务工作的影响
  • phpcms安装无法连接数据库服务器
  • mongo db数据库
  • 富文本word
  • 项目支出可以列支差旅费吗
  • 发票的规格型号有字数限制吗
  • 印花税计税依据怎么算
  • 个人去税务局开劳务发票要交多少税
  • 金税四期的主要内容
  • 预收账款和应收账款可以合并吗
  • 超过认证期专用发票怎么办
  • 固定资产处置损益怎么算
  • 会计人要求
  • 政府补贴的装修费是免税的吗
  • 固定资产清理账户期末有余额吗
  • 调整其他应付款作为收入
  • 购买用品开专票怎么入账
  • 党组织专项经费包括什么
  • 固定资产售后回租融资租赁利息可以抵扣进项税额么
  • 企业处理原材料会计分录
  • 开办费包括哪些内容多少钱
  • 会计计量属性是什么意思
  • 该卡已在其他账户中存在什么意思
  • sql指定字段添加数据
  • xp系统玩英雄联盟出现win32
  • ubuntu15.10中文版
  • 进程是什么 进程类型
  • igs文件是什么文件
  • linux yum命令详解
  • Win10系统安装步骤
  • nodejs项目开发
  • node javascript
  • 教女朋友学粤语
  • python中将
  • xp启动项 命令
  • linux中wget命令出现错误
  • 如何使用form表单
  • Zero Clipboard js+swf实现的复制功能使用方法
  • javascript编程语言
  • bootstrap jumbotron
  • 北京孩子社保网上怎么缴费
  • 研发费用加计扣除75%还是100%
  • 200平交多少契税
  • 天津车辆购置税网上办税
  • 西安代驾平台有哪些
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设