第一:父组件
import Menu from './Menu/index.vue'
import{ref,reactive} from 'vue'
const menus = ref(null);
const list = reactive
//flag 不定义ts照样正常
const getList = (list:number[],flag) =>{
console.log(list,'我是子组件传递过来的',flag);
//可以获取到defineExpose交出来的值
console.log(menus.value)
}
第二:子组件
菜单区域
{{ title }}
{{ data }}
import{ref,reactive} from 'vue';
const list = reactive
//接受父组件参数--?是可选可不选【相当于默认的】
type Props = {
title?:string,
data?:Number,
}
// withDefaults 和 defineProps 二选一
withDefaults(defineProps
title:'我是默认值',
//复杂数据类型,可以通过这种方式
data:()=>[1,2,3,4]
});
//接受父组件值
//defineProps
//向父组件传递-- 可以传递多个
const emit = defineEmits(['on-click','on-click2'])
const clickTap1 = () =>{
//派发的和defineEmits定义的要匹配一样。
emit('on-click',list, false);
}
const clickTap2 = () =>{
//派发的和defineEmits定义的要匹配一样。
emit('on-click2',list, true);
}
//可以将方法主动暴露出来--这里是list暴露给父组件--通过ref="menus"
//相当于交出去的值
defineExpose({
list
})