父组件
<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>