如果必须要两个表单都在页面上不用父子组件怎么做

如果你不需要使用父子组件，而是希望两个表单在同一页面上并行存在并且各自管理，你可以将它们作为独立的Vue组件，并且在HTML模板中并排放置。这里是一个基本的例子：

1. 在项目目录下创建两个单独的表单组件文件，例如`UserForm.vue`和`OrderForm.vue`。在`UserForm.vue`里：

   <template>
     <div class="user-form">
       <a-form ref="userForm" :model="userFormData" :form="userFormRules">
         <!-- 用户表单的内容 -->
       </a-form>
     </div>
   </template>

   <script>
   import { Form, Input } from 'ant-design-vue';

   export default {
     components: {
       Form,
       Input,
     },
     data() {
       return {
         userFormData: {}, // 初始化用户表单的数据
         userFormRules: {} // 初始化用户表单的验证规则
       };
     },
     // ...其他业务逻辑和验证方法
   };
   </script>

2. 对于`OrderForm.vue`也做同样的操作，只是数据和验证规则不同。

3. 在App.vue或其他适当的地方引入这两个表单组件：

   <template>
     <div id="app">
       <user-form></user-form>
       <order-form></order-form>
     </div>
   </template>

4. 当你需要提交时，每个表单应该有自己的提交方法，可能还会有一个公共的保存按钮或者事件总线来协调提交：

   <!-- 共享的保存按钮，点击时可能会触发一个全局事件 -->
   <button @click="saveBothForms">保存</button>

   <script>
   export default {
     methods: {
       saveBothForms() {
         this.$refs.userForm.submit();
         this.$refs.orderForm.submit();
       }
     }
   };