当前位置: 首页 > news >正文

【Vue3-Typescript】<script setup lang=“ts“> 使用 ref标签 怎么获取 refs子组件呢

注意:请确保子组件已经正确挂载,并且通过 defineExpose 暴露了您想要在父组件中访问的属性或方法 

parent.vue

<template><child ref="childRef"></child><button @click="fun">点击父组件</button>
</template><script setup lang="ts">
import { ref } from "vue"
import child from "./child.vue"const childRef = ref(undefined as {childFun: () => void,childFunVue2: () => void
} | undefined)
const fun = () => {console.log("fun==",childRef.value)// console.log(childRef.value)// childRef.value?.childFunVue2()
}
</script>

child.vue 

<template><div><button>这里是子组件</button>
<!--		<slot name="child1"/>-->
<!--		<slot name="child2"/>--></div>
</template><script setup lang="ts">import {defineExpose} from "vue"const childFun = () => {console.log("这里是子组件的方法")
}const childFunVue2 = () => {console.log("这里是子组件的方法Vue2")
}defineExpose({childFun,childFunVue2
})</script>

http://www.lryc.cn/news/423378.html

相关文章:

  • npm 超详细使用教程
  • TypeScript函数
  • 中海油某海上平台轨道巡检机器人解决方案
  • 【NXP-MCXA153】SPI驱动移植
  • Python if 编程题|Python一对一辅导教学
  • 机器学习——第十一章 特征选择与稀疏学习
  • 花式表演无人机技术详解
  • 服务器那点事--防火墙
  • C:每日一题:单身狗
  • SQL之使用存储过程循环插入数据
  • 智慧楼宇公厕系统小程序,提高卫生间管理使用效率
  • 深度剖析:云数据库与传统数据库的显著差异
  • # 利刃出鞘_Tomcat 核心原理解析(六)
  • 双亲委派模型
  • Linux下ETCD安装、配置、命令
  • 【QT】静态库与动态库
  • R的行和列命名和类型的转换
  • 某通用系统0day审计过程
  • windows C++-高级并发和异步(一)
  • Java FX 学习
  • 【走迷宫】
  • linux(debian)迁移var数据到已分配逻辑卷的物理盘
  • 【产品那些事】什么是应用程序安全态势管理(ASPM)?
  • cocosUI多分辨率适配
  • 无法加载到主类
  • 深入理解Kafka核心设计与实践原理_03
  • MySQL- 覆盖索引
  • JSON与EXL文件互转
  • 后台管理权限自定义按钮指令v-hasPermi
  • 【Python绘制散点图并添加趋势线和公式以及相关系数和RMSE】