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;
  }
}
相关推荐
无名客01 小时前
npm run dev 启动项目 报Error: listen EACCES: permission denied 0.0.0.0:80 解决方法
前端·javascript·vue.js
零点七九1 小时前
vue npm install卡住没反应
前端·vue.js·npm
墨菲安全1 小时前
NPM组件 @0xme5war/apicli 等窃取主机敏感信息
前端·npm·node.js·主机信息窃取·npm恶意包·npm投毒
Komorebi_99991 小时前
vue create 项目名 和 npm init vue@latest 创建vue项目的不同
前端·vue.js·npm
好好研究4 小时前
使用JavaScript实现轮播图的自动切换和左右箭头切换效果
开发语言·前端·javascript·css·html
paopaokaka_luck5 小时前
基于Spring Boot+Vue的吉他社团系统设计和实现(协同过滤算法)
java·vue.js·spring boot·后端·spring
伍哥的传说7 小时前
Radash.js 现代化JavaScript实用工具库详解 – 轻量级Lodash替代方案
开发语言·javascript·ecmascript·tree-shaking·radash.js·debounce·throttle
程序视点8 小时前
IObit Uninstaller Pro专业卸载,免激活版本,卸载清理注册表,彻底告别软件残留
前端·windows·后端
前端程序媛-Tian8 小时前
【dropdown组件填坑指南】—怎么实现下拉框的位置计算
前端·javascript·vue
iamlujingtao8 小时前
js多边形算法:获取多边形中心点,且必定在多边形内部
javascript·算法