本文主要是介绍uniapp使用defineExpose暴露和onMounted访问，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
defineExpose作用
暴露方法和数据
- 允许从模板或其他组件访问当前组件内部的方法和数据。
- 明确指定哪些方法和数据可以被外部访问，从而避免不必要的暴露。
增强安全性
- 通过显式声明哪些方法和数据可以被外部访问，防止意外修改内部状态。
- 提高组件的安全性，避免因误操作导致的问题。
提升可维护性
- 清晰地定义组件的边界，使其他开发者更容易理解和使用组件。
- 增强组件的可维护性，便于后续的开发和维护工作。
onMounted作用
DOM 操作
- 当你需要根据 DOM 的状态来执行某些操作时，可以在
onMounted钩子中进行。例如，设置某个元素的高度或宽度，或者初始化第三方插件。异步请求
- 组件挂载后，通常会触发一些异步请求来获取数据填充到页面中。这些请求通常在
onMounted钩子中发起。事件绑定
- 如果需要给 DOM 元素绑定事件监听器，那么
onMounted是一个合适的地方总结
defineExpose用于定义组件的公开 API，控制哪些方法和数据可以被外部访问。onMounted用于执行组件挂载完成后的一些初始化操作，如 DOM 操作、异步请求等。两者可以结合使用，以实现更安全、更高效的组件设计。在实际开发中，可以根据组件的具体需求来决定是否以及如何使用这两个特性。
示例
子组件定义:
defineExpose将name、age和show方法暴露给父组件<template><view>子组件</view> </template><script setup>import {ref} from 'vue';// 声明一个响应式变量name，初始值为'张三'var name = ref('张三')// 声明一个响应式变量age，初始值为18var age = ref(18)/*** 显示名称和年龄的方法* @returns {string} 返回名称和年龄的字符串*/var show = () => {return '名称' + name.value + ' 年龄' + age.value}// 导出name, age和show方法，以便父组件可以访问和调用defineExpose({name: name,age: age,show}) </script>
父组件定义
模板部分 (
<template>):
- 包含一个
bdqn-header组件，并通过ref属性将其引用赋值给student。- 三个
<view>元素分别显示student的name、age和调用show方法的结果。脚本部分 (
<script setup>):
- 引入
onMounted和ref函数。- 声明一个响应式变量
student，并初始化为null。- 在
onMounted钩子中打印student的值<template><!-- 使用ref属性绑定student对象 --><bdqn-header ref="student"></bdqn-header><!-- 条件渲染学生的姓名 --><view>{{student?.name}}</view><!-- 条件渲染学生的年龄 --><view>{{student?.age}}</view><!-- 调用student对象的show方法 --><view>{{ student?.show()}}</view> </template><script setup>// 导入Vue的core功能，包括ref和onMountedimport {onMounted,ref} from 'vue';// 定义一个可变的student引用，初始值为nullvar student = ref(null)// 在组件挂载完成后执行回调函数onMounted(() => {// 打印此时的student值，用于调试console.log(student.value);}) </script>
这篇关于uniapp使用defineExpose暴露和onMounted访问的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
