父组件访问子组件的方法或参数 (子组件暴漏出方法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>