vue3: 通过ref打开弹框的方法

父

<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>