位置: 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年1号
  • 实收资本印花税最新规定
  • 收入准则建造合同预付款
  • 个人公益性捐赠全额还是限额
  • 机会成本怎么计量
  • 电池消费税征税范围
  • 工会经费怎么申报,多久报一次
  • 差旅费报销需要提交的单据有
  • php获取多选框的值
  • 总包和分包是什么关系
  • php数组有哪几种类型
  • vue路由跳转原理
  • 申请高新技术企业的好处
  • 固定资产清理的会计科目处理
  • 如何配置phpstudy
  • html中的标签有哪些
  • angular 初学者快速上手教程
  • php常用的三种设置方式
  • css怎么让文字垂直居中显示
  • 转正差额怎么算
  • 固定资产计提折旧的方法
  • 待摊费用的明细
  • 往来款的意思
  • 个税APP怎么填报扣税最少
  • 经济利益的总流入
  • sql解析执行顺序
  • 应收账款的注意要点
  • 劳务费会计分录是什么
  • 应收款和实收款区别
  • 金税三期个税申报
  • 研发人员工资计入什么科目
  • 为取得借款发生的手续费
  • 资本公积的主要用途是什么?
  • 出口运保费是什么费用
  • 免抵退税怎么申报
  • 小规模公司用什么成本核算方法
  • 公转私怎么操作
  • 企业积分是什么意思
  • 利润表中公允价值变动为贷
  • 个体工商户建账流程
  • 公司买支票需要带什么资料
  • mysql中关于图书馆实训题
  • sql server怎么改数据
  • SQL SELECT 语句的表连接
  • Windows Vista下IIS使用常见问题
  • centos6创建文件
  • windows 批处理
  • linux系统文件压缩命令
  • y400加装固态硬盘教程
  • win8系统怎么样
  • 2015年win10共发布135个安全补丁 创历年之最
  • 代理服务器只能代理客户端http的请求
  • 如何刷硬盘使用时间
  • win10系统如何设置不休眠
  • android 相对布局居中
  • easyui multiple
  • jquery popupDialog 使用 加载jsp页面的方法
  • each和each
  • 如何查询税务是否签订三方
  • 申请税务增票怎么写
  • 国有土地使用权出让和转让条例
  • 福斯特会计软件下载
  • 经营碎石的税点多少
  • 坡面台阶
  • 浙江省违章建筑年限认定
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设