uni-app学习笔记十五-vue3中defineExpose的使用

使用 <script setup> 的组件是默认关闭的——即通过模板引用或者 $parent 链获取到的组件的公开实例，不会暴露任何在 <script setup> 中声明的绑定。

可以通过 defineExpose 编译器宏来显式指定在 <script setup> 组件中要暴露出去的属性。我们可以通过在子组件中defineExpose 暴露一些属性和方法。父组件中可直接调用子组件定义的方法和获取属性值。下面是一个小demo示范下defineExpose的使用。

子组件demo-child.vue

<template>
	<view class="out">
		子组件的值：{{count}}
	</view>
</template>

<script setup>
	import {ref} from "vue"
	const count = ref(100)
	const updateCount = function(){
		count.value++
	}
	defineExpose({
		count,
		name:"XXM",
		updateCount
	})
</script>

子组件中暴露了2个属性count和name,1个方法updateCount。

父组件中使用：

<template>
	<view class="layout">
		<demo-child ref="child"></demo-child>
		<view>--------------</view>
		<button @click="update">点击修改子值</button>
	</view>
</template>

<script setup>
	import {onMounted, ref} from "vue"
	const child = ref(null)
	const update = function(){
		child.value.updateCount()
	}
	onMounted(()=>{
		console.log(child.value)
	})
</script>

上面JS中使用了一个vue3的生命周期钩子函数onMounted，用于在页面未渲染完成时获取值。

上面通过child.value.updateCount()获得子组件定义的方法updateCount。

来看实际效果：

随着按钮的点击，子组件的值由最初的100变成105，调用的是子组件定义的函数updateCount来修改值。当执行点击事件时，页面已渲染完成，因此无需在onMounted取值，在外层即可获取到值。