javascript - 使用 Vuejs 构建表单。将数据从 child 传递给 parent

Question

我正在尝试使用 "v-for" 为输入组件构建一个表单，然后使用来自输入的数据使用 PDFMake 生成一个 pdf 文件。但是我不知道如何将数据从输入组件传回父组件。

我阅读了很多主题，但找不到实现此目的的方法。

这是没有额外输入、复选框等的短代码。我计划使用大约 15 个具有不同参数的输入来生成最终的 PDF。一些参数还将用于根据条件语句更改最终数据。如果代码在一个文件中，没有循环和组件，一切都可以正常工作。但不是现在。

这是父级:

<template lang="pug">
  .form
    Input(v-for="data in form.client_info" v-bind:key="data.id" v-bind:data="data")
    button(@click="pdfgen") Download PDF
</template>

<script>
 export default {

  components: {
   Input: () => import('@/components/items/form/input')
  },

  data() {
   return {
    client_name: '',
    client_email: '',
    form: {
     client_info: [
      {id:'client_name', title:'Name'},
      {id:'client_email', title: 'Email'},
      {id:'foo', title: 'foo'}
     ],
    }
   }
  },

  methods: {
   pdfgen: function () {
    var pdfMake = require('pdfmake/build/pdfmake.js')
    if (pdfMake.vfs == undefined) {
     var pdfFonts = require('pdfmake/build/vfs_fonts.js')
     pdfMake.vfs = pdfFonts.pdfMake.vfs;
    }

    if (this.foo) {
     var foo = [ 
      'Foo: ' + this.foo
     ];
    } else {
     foo = ''
     ]
    }

    var docDefinition = {
     content: [
      'Name: ' + this.client_name,
      'Email: ' + this.client_email,
      '\n',
      foo
     ]
    }
    pdfMake.createPdf(docDefinition).download('Demo.pdf');
   }
  }
 }
</script>

这是一个 child (输入组件):

<template lang="pug">
 label.form_item
  span.form_item_title {{ data.title }}
  input.form_item_input(:v-model="data.id" type="text")
</template>

<script>
 export default {
  props: ['data']
 }
</script>

有什么想法可以让它发挥作用吗？

Answer 1

您需要使用 vue 内置的名为 $emit() 的方法。

在介绍如何操作之前，先快速解释一下。因为 vue 试图使数据单向流动，所以没有一种 super 快速的方法可以将数据传回父级。相反，Vue 建议将一个方法传递给子组件，该方法在被调用时会将其更改的值“发出”给它的父组件，然后父组件可以使用该值执行它想要的操作。

因此，在您的父组件中，您需要添加一个方法来在子组件发出 时处理更改。这可能看起来像:

onChildValueChanged(value){ this.someValue = value }

我们传递给函数的 value 将来 self 们的子组件。我们需要在我们的子组件中定义这个函数应该做什么。在您的子组件中，您可以拥有如下所示的功能:

emitValueChange(event){ this.$emit('childFunctionCall', this.someChildValue) }

接下来，我们需要通过在我们的子模板上添加一个属性来将这两个功能联系在一起。在这个例子中，它可能看起来像:

<Child :parentData="someData" v-on:childFunctionCall="onChildValueChanged"></Child>

上面的模板所做的是说当函数 on:childFunctionCall 被“发出”时，我们在父作用域中的函数应该被触发。

最后，在子模板中我们只需要添加一些调用发射器的事件。这可能看起来像:

<button v-on:click="emitToParent">This is a button</button>

所以当我们的按钮被点击时，发射器被调用。这会触发名为“emitToParent”的子组件中的函数，该函数又会调用我们传递给子组件的函数。

您必须定制您的用例以匹配考试