uniapp使用defineExpose暴露和onMounted访问

defineExpose作用

暴露方法和数据

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

增强安全性

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

提升可维护性

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

onMounted 作用

DOM 操作

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

异步请求

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

事件绑定

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

总结

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

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

示例


子组件定义:

defineExposenameageshow 方法暴露给父组件

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> 元素分别显示 studentnameage 和调用 show 方法的结果。
  • 脚本部分 (<script setup>):

    • 引入 onMountedref 函数。
    • 声明一个响应式变量 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>
相关推荐
尘浮生1 小时前
Java项目实战II基于Spring Boot的光影视频平台(开发文档+数据库+源码)
java·开发语言·数据库·spring boot·后端·maven·intellij-idea
aloha_78910 小时前
从零记录搭建一个干净的mybatis环境
java·笔记·spring·spring cloud·maven·mybatis·springboot
尢词12 小时前
SpringMVC
java·spring·java-ee·tomcat·maven
wrx繁星点点12 小时前
享元模式:高效管理共享对象的设计模式
java·开发语言·spring·设计模式·maven·intellij-idea·享元模式
前 方13 小时前
若依入门案例
java·spring boot·maven
咕哧普拉啦14 小时前
乐尚代驾十订单支付seata、rabbitmq异步消息、redisson延迟队列
java·spring boot·mysql·spring·maven·乐尚代驾·java最新项目
不像程序员的程序媛15 小时前
mybatisgenerator生成mapper时报错
maven·mybatis
移民找老国16 小时前
加拿大移民新风向
java-ee·maven·phpstorm·visual studio code·nio
LUwantAC16 小时前
Java学习路线:Maven(三)继承关系
java·学习·maven
尘浮生20 小时前
Java项目实战II基于Spring Boot的问卷调查系统的设计与实现(开发文档+数据库+源码)
java·开发语言·数据库·spring boot·后端·maven·intellij-idea