使用 Vuejs 构建表单。将数据从孩子传递给父母

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>

这是一个子组件（输入组件）：

<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 试图使数据单向流动，所以没有一种超级快速的方法可以将数据传回给父级。相反，Vue 建议将一个方法传递给子组件，当调用该方法时，它将“发出”它更改为父组件的值，然后父组件可以使用该值做它想做的事情。

因此，在您的父组件中，您需要添加一个方法来处理子组件emits 时的更改。这可能类似于：

onChildValueChanged(value){ this.someValue = value }

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

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”的函数，该函数又会调用我们传递给子组件的函数。

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

Answer 2

我找到了一个使用 Vuex 的解决方案。 所以现在我的组件看起来像这样。

这里是家长：

<template lang="pug">
  .form
    Input(v-for="data in formClient" 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'),
   store: () => import('@/store'),
  },

  computed: {
    formClient() { return this.$store.getters.client }
  }
 }
</script>

这是一个子组件（输入组件）：

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

<script>
 export default {
  props: ['data'],
  computed: {
   form: {
    get () {
     return this.$store.state.obj.message
    },
    set (value) {
     this.$store.commit('updateMessage', value)
    }
   }
  }
 }
</script>

这是一个商店模块：

<script>
 export default {
 actions: {},
 mutations: {},
 state: {
  form: {
   client: [
    {id:'client_name', title:'Name', value: ''},
    {id:'client_email', title: 'Email', value: ''},
    {id:'foo', title: 'foo', value: ''}
   ]
  }
 },
 getters: {
  client: state => {
   return state.form.client;
  }
 }
}
</script>

现在我可以直接从 PDFMake 函数读取 store 中的更新数据。