做网站收多少钱,瑞安自适应网站建设,wordpress不同分类,点击网站出现微信二维码的链接怎么做目录 前言1. 基本知识2. Demo3. 实战 前言
其基本知识可参考官网#xff1a;Vue3中的defineExpose
1. 基本知识
defineExpose 是 Vue 3 的 Composition API 中一个新的实用函数#xff0c;用于在 script setup 语法下显式暴露组件的公共属性和方法
这在处理子组件… 目录 前言1. 基本知识2. Demo3. 实战 前言
其基本知识可参考官网Vue3中的defineExpose
1. 基本知识
defineExpose 是 Vue 3 的 Composition API 中一个新的实用函数用于在 script setup 语法下显式暴露组件的公共属性和方法
这在处理子组件时特别有用允许父组件访问子组件的特定属性或方法
在 Vue 3 中当我们使用 script setup 语法糖时组件默认不会自动暴露内部的任何状态或方法给外部使用为了显式暴露某些属性或方法可以使用 defineExpose
示例Demo如下
script setup
import { ref } from vueconst a 1
const b ref(2)defineExpose({a,b
})
/script当父组件通过模板引用的方式获取到当前组件的实例获取到的实例会像这样 { a: number, b: number } (ref 会和在普通实例中一样被自动解包)
2. Demo
父组件渲染子组件 Child 并通过 ref 获取子组件的实例。子组件中的 count 和 increment 方法通过 defineExpose 暴露出来。当点击父组件中的 “Access Child Methods” 按钮时父组件可以访问并调用子组件的 count 和 increment
子组件
templatedivpCount: {{ count }}/pbutton clickincrementIncrement/button/div
/templatescript setup
import { ref } from vue;const count ref(0);function increment() {count.value;
}// 使用 defineExpose 来暴露 count 和 increment
defineExpose({count,increment,
});
/script父组件
templatedivChild refchildRef /button clickaccessChildAccess Child Methods/button/div
/templatescript setup
import { ref, onMounted } from vue;
import Child from ./Child.vue;const childRef ref(null);function accessChild() {if (childRef.value) {console.log(Current count:, childRef.value.count);childRef.value.increment();console.log(Count after increment:, childRef.value.count);}
}onMounted(() {if (childRef.value) {console.log(Child component mounted, initial count:, childRef.value.count);}
});
/script总的来说
defineExpose 用于在 script setup 中显式暴露组件内部状态和方法父组件可以通过 ref 访问子组件实例并调用暴露的属性和方法使用 defineExpose 可以让组件更加模块化和可控只有显式暴露的部分才能被外部访问增强了封装性和安全性
这个功能在组件之间需要进行复杂交互时特别有用尤其是在大型项目中能够显著提升代码的可读性和可维护性
3. 实战
也可通过函数进行暴露
templatedivbutton clickopenFetch Data/buttondiv v-ifdetailLoadingLoading.../divdiv v-elsediv v-foritem in detailData.attachment1 :keyitem{{ item }}/divdiv v-foritem in detailData.attachment2 :keyitem{{ item }}/div/div/div
/templatescript setup
import { ref, onMounted } from vue
import DangerousWorkApi from /api/DangerousWorkApiconst detailLoading ref(false)
const detailData ref({})
const props defineProps([id])
const queryId some-query-idconst getInfo async () {detailLoading.value truetry {detailData.value await DangerousWorkApi.getDangerousWork(props.id || queryId)const attachment1 detailData.value.attachment1;const attachment2 detailData.value.attachment2;detailData.value.attachment1 attachment1.split(,);detailData.value.attachment2 attachment2.split(,);} finally {detailLoading.value false}
}defineExpose({ open: getInfo })onMounted(() {getInfo()
})
/script
