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

Vue 3 中的 defineExpose

Vue 3 中的 defineExpose

作用:

1、在 Vue 3 中,<script setup> 默认是封闭的。子组件的内容不会自动暴露给父组件。
2、使用 defineExpose 可以选择性地暴露内部内容,从而避免不必要的属性泄漏,同时提供更好的封装性。

以下是具体的步骤和示例:

子组件 (mainBim.vue)
在子组件中使用 defineExpose 暴露 modelSwitch 方法:

<script setup>
import { ref } from 'vue';

const modelSwitch = () => {
  console.log('Model switch called');
  // 在这里添加你的逻辑
};

defineExpose({
  modelSwitch
});
</script>

父组件
在父组件中通过模板引用(ref)来调用子组件暴露的方法:

<template>
  <div>
    <main-bim ref="bimComponent" />
    <button @click="callModelSwitch">Call Model Switch</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import MainBim from '@/pages/dashboard/facility/module/mainBim.vue';

const bimComponent = ref(null);

const callModelSwitch = () => {
  if (bimComponent.value) {
    bimComponent.value.modelSwitch();
  }
};
</script>

关键点解释:
1、子组件:

使用 defineExpose 暴露 modelSwitch 方法。
这样父组件可以通过模板引用访问 modelSwitch 方法。
2、父组件:

使用 ref 创建一个对子组件的引用(例如 bimComponent)。
在需要调用子组件方法的地方(例如按钮点击事件),通过 bimComponent.value.modelSwitch() 调用子组件暴露的方法。
通过这种方式,父组件可以直接调用子组件中通过 defineExpose 暴露的方法。确保在调用之前检查引用是否存在,以避免潜在的错误。


http://www.kler.cn/a/508615.html

相关文章:

  • opencv图像基础学习
  • mongoose 支持https踩坑纪实
  • PyTorch 神经协同过滤 (NCF) 推荐系统教程
  • 如何攻击一个服务器(仅用于教育及娱乐实验目的)
  • Web3与加密技术的结合:增强个人隐私保护的未来趋势
  • DNS介绍与部署-Day 01
  • C语言之字符函数和字符串函数(上)
  • Vue3实现表格搜索内容高亮
  • Kotlin Bytedeco OpenCV 图像图像57 图像ROI
  • BUUCTF Web
  • 哪些新兴技术对智能驾驶汽车影响最大?
  • Neo4j与Python交互
  • FFMpeg的一些常用命令
  • 一探究竟:如何高效提取ULL中的当前参数,实现性能与精度的完美平衡
  • 矩阵碰一碰发视频源码技术开发全解析,支持OEM
  • 【9.1】Golang后端开发系列--Gin快速入门指南
  • 机器学习(3):逻辑回归
  • CAP:Serverless + AI 让应用开发更简单
  • 分频器code
  • Java-数据结构-二叉树(配图详解)
  • SQL Server 导入Excel数据
  • 【Gossip 协议】Golang的实现库Memberlist 库简介
  • 深度学习项目--基于LSTM的火灾预测研究(pytorch实现)
  • 下定决心不去读研了。。。
  • Vue3组件通信进阶: 大型项目中Provide/Inject与EventBus的实战应用
  • Python基本概念与实践