使用 <script setup> 实现弹窗数据回传到父组件

<tr>
          <td colspan="2" class="col1">
            本次检查项目
            <a-button @click="addThisTime">选择</a-button>
          </td>
          <td colspan="10" class="col2">
            <a-textarea v-model:value="planModel.checkThisTime" :rows=3 style="border-style: hidden;border-bottom: 1px solid #050505;"/>
          </td>
        </tr>
<PrenatalCheckupModal @register="prenatalCheckup"></PrenatalCheckupModal>
<script  setup>
const [prenatalCheckup, {openModal:openCheckupModal}] = useModal();
<pre><code>function addThisTime(){
  openCheckupModal(true, {
    isThisTime: true,
  });
}
</code></pre>
</script>
使用`<script setup>`可以通过调用`openCheckupModal`方法传递参数来打开弹窗，并在弹窗内部进行数据的修改和提交。
<p>在弹窗组件<code>PrenatalCheckupModal</code>中，可以通过<code>$emit</code>方法触发一个自定义事件，将修改后的数据传递给父组件。具体操作步骤如下：</p>
<ol>
<li>在弹窗组件中，添加一个提交按钮，点击按钮时触发<code>submit</code>事件，并传递修改后的数据：</li>
</ol>
<pre><code class="language-html">&lt;template&gt;
  &lt;div&gt;
    &lt;!-- 弹窗内容 --&gt;
    &lt;a-button @click=&quot;submit&quot;&gt;提交&lt;/a-button&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script setup&gt;
  const submit = () =&gt; {
    // 获取修改后的数据
    const modifiedData = '修改后的数据';
    // 触发submit事件，将修改后的数据传递给父组件
    $emit('submit', modifiedData);
  };
&lt;/script&gt;
</code></pre>
<ol start="2">
<li>在父组件中，监听<code>PrenatalCheckupModal</code>组件的<code>submit</code>事件，并在事件处理函数中更新<code>planModel.checkThisTime</code>的值：</li>
</ol>
<pre><code class="language-html">&lt;script setup&gt;
  // ...

  // 监听submit事件，更新planModel.checkThisTime的值
  const prenatalCheckup = (data) =&gt; {
    planModel.checkThisTime = data;
  };

  // ...
&lt;/script&gt;
</code></pre>
<ol start="3">
<li>在父组件中，将监听到的<code>prenatalCheckup</code>方法传递给<code>PrenatalCheckupModal</code>组件：</li>
</ol>
<pre><code class="language-html">&lt;PrenatalCheckupModal @submit=&quot;prenatalCheckup&quot;&gt;&lt;/PrenatalCheckupModal&gt;
</code></pre>
<p>这样，在弹窗中点击提交按钮后，修改后的数据就会传递给父组件的<code>prenatalCheckup</code>方法，然后在该方法内部更新<code>planModel.checkThisTime</code>的值。</p>