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

  • 牛奶的增值税税率
  • 对外支付人民币存在残缺污损的问题
  • 销售软件税目
  • 应交所得税的计税依据
  • 什么公司可以核算成本
  • 股东借款转实收资本需要什么附件
  • 其他应付款能转收入么
  • 企业收到退回商品的会计分录
  • 企业收到跨年度的政府补贴款,是否计入当年企业所得税
  • 地质灾害评估费收费标准
  • 企业营改增后的会计处理有何变化
  • 个体工商户2020
  • 蓝字发票是什么
  • 企业注销增值税进项核销账务处理流程
  • 多扣除了应交税费怎么调整?
  • 房地产企业扣除项目
  • 企业所得税抵缴欠税
  • 工程用的叉车计提折旧记到什么科目?
  • 购买商品未入库
  • 农村合作社补贴政策
  • 打开网页提示打开别的应用
  • 企业之间资金拆借利息是否可以税前扣除
  • ∧oc电脑bios
  • 纳税调整需要调年度报表嘛
  • 银行承兑汇票开出后可以撤销吗?
  • 换股的具体方式是什么
  • 机动车空白发票作废税务局需要提供说明
  • 工业厂房修缮工程需要报建吗
  • jquery 批量删除
  • 税务函调异常怎么处理
  • 微信小程序几几年上线的
  • 如何取消axios请求
  • 自动化测试三年规划
  • PHP中spl_autoload_register()函数用法实例详解
  • ps怎么把文字单独抠出来
  • 政府奖励怎么做会计分录
  • 安全文明措施费费率一般为多少
  • 社保可以不计提直接缴纳吗
  • 工业企业成本核算方法
  • 预收账款发货
  • 分公司可以分配利润吗
  • Python的aiohttp模块如何使用?
  • 以前年度损益调整是什么意思
  • python3 tcp
  • 规划设计费会计分录
  • 代开发票可能遇到的问题是?
  • 出售固定资产应收账款
  • 固定资产计提折旧的原则
  • 派发股利政策
  • 招标公司的成本控制
  • 安置房买卖过户流程
  • 企业流动资金的筹措应以财政拨款为主
  • 公司账户可以转个人支付宝吗
  • 小企业会计准则2023电子版
  • 小规模什么情况下必须转为一般纳税人
  • 出口退税的会计处理
  • 简述Mysql Explain 命令
  • mybatis分页插件的原理
  • vmwareworkstation10虚拟机
  • 多屏协同苹果系统有吗
  • 64位win10预览版10565更新补丁KB3105208后蓝屏怎么办?
  • Win10 Mobile Build 14342上手体验视频
  • Linux服务器架设指南百度网盘
  • win10系统更改
  • app的架构设计
  • 用python加密
  • cocos2dx schedule
  • Cocos2dx 3.0 lambda表达式的使用
  • JavaScript中的变量名不区分大小写
  • dos help命令
  • js原型作用
  • CLASS_CONFUSION JS混淆 全源码
  • jquery确认取消对话框
  • 个人土地建房
  • 个人所得税核定征收的政策
  • 社保欠缴可以放弃吗
  • 新办纳税人是什么多久之内
  • 补贴收入有哪些
  • 四川税务专管员查询
  • 宁波税务干部学校
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设