defineExpose作用
暴露方法和数据
- 允许从模板或其他组件访问当前组件内部的方法和数据。
- 明确指定哪些方法和数据可以被外部访问,从而避免不必要的暴露。
增强安全性
- 通过显式声明哪些方法和数据可以被外部访问,防止意外修改内部状态。
- 提高组件的安全性,避免因误操作导致的问题。
提升可维护性
- 清晰地定义组件的边界,使其他开发者更容易理解和使用组件。
- 增强组件的可维护性,便于后续的开发和维护工作。
onMounted
作用
DOM 操作
- 当你需要根据 DOM 的状态来执行某些操作时,可以在
onMounted
钩子中进行。例如,设置某个元素的高度或宽度,或者初始化第三方插件。
异步请求
- 组件挂载后,通常会触发一些异步请求来获取数据填充到页面中。这些请求通常在
onMounted
钩子中发起。
事件绑定
- 如果需要给 DOM 元素绑定事件监听器,那么
onMounted
是一个合适的地方总结
defineExpose
用于定义组件的公开 API,控制哪些方法和数据可以被外部访问。onMounted
用于执行组件挂载完成后的一些初始化操作,如 DOM 操作、异步请求等。两者可以结合使用,以实现更安全、更高效的组件设计。在实际开发中,可以根据组件的具体需求来决定是否以及如何使用这两个特性。
示例
子组件定义:
defineExpose
将name
、age
和show
方法暴露给父组件
javascript<template> <view> 子组件 </view> </template> <script setup> import { ref } from 'vue'; // 声明一个响应式变量name,初始值为'张三' var name = ref('张三') // 声明一个响应式变量age,初始值为18 var 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
的值
javascript<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和onMounted import { onMounted, ref } from 'vue'; // 定义一个可变的student引用,初始值为null var student = ref(null) // 在组件挂载完成后执行回调函数 onMounted(() => { // 打印此时的student值,用于调试 console.log(student.value); }) </script>
uniapp使用defineExpose暴露和onMounted访问
小汤猿人类2024-09-01 21:55
相关推荐
尘浮生1 小时前
Java项目实战II基于Spring Boot的光影视频平台(开发文档+数据库+源码)aloha_78910 小时前
从零记录搭建一个干净的mybatis环境尢词12 小时前
SpringMVCwrx繁星点点12 小时前
享元模式:高效管理共享对象的设计模式前 方13 小时前
若依入门案例咕哧普拉啦14 小时前
乐尚代驾十订单支付seata、rabbitmq异步消息、redisson延迟队列不像程序员的程序媛15 小时前
mybatisgenerator生成mapper时报错移民找老国16 小时前
加拿大移民新风向LUwantAC16 小时前
Java学习路线:Maven(三)继承关系尘浮生20 小时前
Java项目实战II基于Spring Boot的问卷调查系统的设计与实现(开发文档+数据库+源码)