uniapp使用defineExpose暴露和onMounted访问

defineExpose作用

1. 暴露方法和数据

   • 允许从模板或其他组件访问当前组件内部的方法和数据。
   • 明确指定哪些方法和数据可以被外部访问，从而避免不必要的暴露。

2. 增强安全性

   • 通过显式声明哪些方法和数据可以被外部访问，防止意外修改内部状态。
   • 提高组件的安全性，避免因误操作导致的问题。

3. 提升可维护性

   • 清晰地定义组件的边界，使其他开发者更容易理解和使用组件。
   • 增强组件的可维护性，便于后续的开发和维护工作。

onMounted 作用

1. DOM 操作

   • 当你需要根据 DOM 的状态来执行某些操作时，可以在 onMounted 钩子中进行。例如，设置某个元素的高度或宽度，或者初始化第三方插件。

2. 异步请求

   • 组件挂载后，通常会触发一些异步请求来获取数据填充到页面中。这些请求通常在 onMounted 钩子中发起。

3. 事件绑定

   • 如果需要给 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>