vue3对话框组件提交内容

在Vue3中，对话框组件通常包含一个表单供用户输入内容，当用户点击提交按钮时，需要处理数据并发送到后端或进行本地操作。你可以按照以下步骤创建一个基本的对话框组件：

1. 定义一个对话框组件模板：

<template>
  <div class="dialog">
    <form @submit.prevent="handleSubmit">
      <input v-model="formData.title" type="text" placeholder="标题">
      <textarea v-model="formData.content" placeholder="内容"></textarea>
      <button type="submit">提交</button>
    </form>
  </div>
</template>

2. 定义组件的数据属性：

<script setup>
import { ref } from 'vue';

const formData = ref({
  title: '',
  content: ''
});
</script>

3. 实现提交方法 `handleSubmit`：

<script setup>
function handleSubmit() {
  // 如果你需要发送数据到后端，可以使用axios或其他HTTP库
  // axios.post('/api/messages', formData.value);

  // 或者，如果只是模拟操作，可以在这里进行逻辑处理
  console.log('提交的内容:', formData.value);
}
</script>

在这个例子中，`v-model`用于双向绑定表单字段，`@submit.prevent`阻止了默认的表单提交行为，并触发`handleSubmit`函数。当用户点击提交时，`formData`对象中的内容会被同步更新并在控制台打印出来。