父组件访问子组件的方法或参数 (子组件暴漏出方法defineExpose)

父组件

<template>
    <div> 
          <Menu ref="menus"  @onclick3="getList3"/>   
          
    </div>
</template>

<script setup lang="ts">
import {
    reactive ,ref}  from 'vue'  
const  menus=ref(null)  //const的名字要和ref定义的一致
interface jianc{
    
    title:string
}
const getList3=()=>{
     
//拿的ref子组件下的参数list [6,6,6,6] //
    console.log(menus.value.list.map(v=>v))

}

</script>

<style scoped>

</style>

子组件 （子组件emit提交一个自定义事件 父组件触发之后 拿到ref子组件下的参数list[6,6,6,6]）

<template>
   <div class="">
      <button @click="clickTap3">派发3</button>
   </div> 
</template>

<script setup lang="ts">
import  {
    reactive,  defineEmits, defineExpose}  from 'vue';

const list=reactive<number[]>([6,6,6,6])//number类型的数组值为[6,6,6,6]
const emit=defineEmits(['onclick3']);
const onclick3=()=>{
    
	emit('onclick3')
}
// 子组件派出去([6,6,6,6]) 父组件拿
defineExpose({
    
    list
})
</script>

<style scoped>
.menu{
    
    width: 100px;text-align: center;
    border: 1px solid #000;
    height: 100vh;
}
</style>