vue3+ts通过ref访问组件里面的方法及属性

vue3+ts通过ref访问组件里面的方法及属性

之前访问不到主要是子组件没有往外暴露要访问的接口子组件使用了 script setup的组件是默认私有的:一个父组件无法访问到一个使用了 script setup的子组件中的任何东西,:
除非子组件在其中通过 defineExpose方法 宏显式暴露
子组件

复制代码
<template>
  <a-drawer v-model:open="open" class="custom-class" root-class-name="root-class-name" :root-style="{ color: 'blue' }"
    title="Basic Drawer" placement="right">
  </a-drawer>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const open = ref(false);
const showDrawer = () => {
  open.value = true;
};
defineExpose({
  showDrawer
})
</script>

父组件

复制代码
 <ApiModel ref="refApiModel"/>
import ApiModel from "./components/ApiModel.vue"
const refApiModel:any=ref(null)
const actionApiRecord=(type:string,record:any)=>{
  switch(type){
    case 'add':
        refApiModel.value?.showDrawer()
      break;
  }
}
相关推荐
qczg_wxg11 分钟前
高阶组件介绍
开发语言·javascript·react native·ecmascript
小菜全27 分钟前
打包 Uniapp
javascript·vue.js·html5
itslife33 分钟前
实现 Promise
前端·javascript
小鱼儿亮亮36 分钟前
canvas中常见问题的解决方法及分析,踩坑填坑经历
前端·canvas
一枚前端小能手37 分钟前
🔥 老板要的功能Webpack没有?手把手教你写个插件解决
前端·javascript·webpack
至善迎风39 分钟前
使用国内镜像源解决 Electron 安装卡在 postinstall 的问题
前端·javascript·electron
mit6.82440 分钟前
[Upscayl图像增强] docs | 前端 | Electron工具(web->app)
前端·人工智能·electron·状态模式
闯闯桑1 小时前
toDF(columns: _*) 语法
开发语言·前端·spark·scala·apache
xrkhy1 小时前
ElementUI之Upload 上传的使用
前端·elementui
IT_陈寒1 小时前
Vite5.0性能翻倍秘籍:7个极致优化技巧让你的开发体验飞起来!
前端·人工智能·后端