vue：表单在子组件（父页面中添加子组件，提交按钮在父组件）怎么处理

最新推荐文章于 2024-07-16 09:57:27 发布

前端小云儿

最新推荐文章于 2024-07-16 09:57:27 发布

阅读量783

点赞数

分类专栏：前端静态页面以及逻辑文章标签： vue.js

本文链接：https://blog.csdn.net/jieweiwujie/article/details/128582215

版权

前端静态页面以及逻辑专栏收录该内容

148 篇文章 22 订阅 ¥9.90 ¥199.90

订阅专栏

超级会员免费看

在Vue.js应用中，如果表单位于子组件内而提交按钮在父组件，可以通过自定义事件实现父子组件间的通信。子组件可以监听用户的表单操作，然后触发自定义事件，将表单数据传递给父组件。父组件接收到事件后进行处理，例如调用API或展示确认信息。这种方法保证了组件间解耦，遵循了Vue的单向数据流原则。

摘要由CSDN通过智能技术生成

<template>
  <div style="margin: 20px">
    <h3>form父页面中添加子组件，提交按钮在父组件</h3>
    <formChild ref="formChild" :formInline="formInline"></formChild>
    <el-button @click="clickHome">clickHome</el-button>
  </div>
</template>
<script>
import formChild from "./formChild.vue";
export default {
  data() {
    return {
      formInline: { name: "", where: "" },
    };
  },
  components: { formChild },
  methods: {
    clickHome() {
      this.$refs.formChild.submitFormFather((isPassFlag, ruleForm) => {
        if (isPassFlag) {
          const data = {
            ...ruleForm,
          };
          //调用方法

了解本专栏