uniapp使用defineExpose暴露和onMounted访问

defineExpose作用

  1. 暴露方法和数据

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

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

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

onMounted 作用

  1. DOM 操作

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

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

    • 如果需要给 DOM 元素绑定事件监听器,那么 onMounted 是一个合适的地方

总结

  • defineExpose 用于定义组件的公开 API,控制哪些方法和数据可以被外部访问。
  • onMounted 用于执行组件挂载完成后的一些初始化操作,如 DOM 操作、异步请求等。

两者可以结合使用,以实现更安全、更高效的组件设计。在实际开发中,可以根据组件的具体需求来决定是否以及如何使用这两个特性。

示例


子组件定义:

defineExpose 将 nameage 和 show 方法暴露给父组件




父组件定义

  • 模板部分 (