Vue3父组件和子组件

子组件暴露方法给父组件，父组件传值

子组件

  const editCalendar = (value: string) => {console.log('获取父组件的值', value)};//暴露给外部调用defineExpose({editCalendar,});

父组件 

<template>
<CalendarEdit ref="editRef" />
</template><script lang="ts" setup>
const editRef = ref();
editRef.value.editCalendar('传给子组件的值');
</script>

父组件点击按钮弹窗，封装子组件

子组件

<template><n-modalv-model:show="props.dialogVisible":mask-closable="false"preset="dialog"title="确认"content="你确认"positive-text="确认"negative-text="取消"@positive-click="onPositiveClick"@negative-click="onNegativeClick"/>
</template><script setup lang="ts">  const props = defineProps<{dialogVisible: boolean;}>();//关闭弹窗要用的const emit = defineEmits(['close']);const onNegativeClick = () => {emit('close');};const onPositiveClick = () => {emit('close');};
</script>

父组件

<n-button @click="showDialog"> +新增 </n-button>  
<CalendarEdit :dialogVisible="dialogVisible"  @close="handleDialogClose" />const dialogVisible = ref(false);//显示
const showDialog = () => {dialogVisible.value = true;};//关闭const handleDialogClose = () => {dialogVisible.value = false;};

更简便的方法

子组件

<template>
<n-modalv-model:show="showModal"
</n-modal>
</template>const show = () => {
showModal.value = true;
}//暴露给外部调用defineExpose({show,});

父组件

<template><CalendarEdit ref="roleModelRef" />
</template><script lang="ts" setup>const roleModelRef = ref<any>(null);const showDialog = () => {roleModelRef.value?.show({}, 'add');};
</script>