父
<div>
<a-button type="link" @click="addRentEvent">添加合同</a-button>
<addRent ref=refRent></addRent>
</div>
js部分:
const refRent = ref<any>('')
const addRentEvent = () => {
refRent.value.open() }
子组件内部
<script setup lang='ts'>
import {ref} from 'vue'
const visible = ref<boolean>(false);
// 打开弹框
const open = () => {
visible.value = true;
}
const handleOk = (e: MouseEvent) => {
console.log(e, 44);
visible.value = false;
};
vue3里面的组件的属性和方法都是封闭起来的,外部组件想要使用,必须通过defineExpose向外抛出对应的函数
defineExpose({open})
</script>
<template>
<div>
<a-button type="primary" @click="open">Open Modal</a-button>
<a-modal v-model:visible="visible" title="Basic Modal" @ok="handleOk">
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</a-modal>
</div>
</template>