vue3 setup语法糖 ref获取子组件属性

父组件

<template>
	<view class="content">
		<button @click="childClick">获取</button>
		<my-tabs ref="mytabs"></my-tabs>
	</view>
</template>
<script setup>
	import MyTabs from '../../components/nav/MyTabs.vue';
	import { ref } from "vue";
	let mytabs = ref(null)
	const childClick = () => {
		console.log(mytabs.value.curtab)
	}
</script>

子组件

setup语法糖需要用defineExpose把要读取的属性和方法暴露出去

<template>
	<view class="mytabs">
		<view class="inner">
			<view @click="handleClick(0)">0</view>
			<view @click="handleClick(1)">1</view>
			<view @click="handleClick(2)">2</view>
		</view>
	</view>
</template>
<script setup>
	import { ref } from "vue"
	let curtab = ref(0)
	const handleClick = (flag) => {
		curtab.value = flag
	}
	defineExpose({
		curtab
	})
</script>