javascript - Vue.js 将数据从插槽传递到组件实例

Question

我正在尝试构建一个可重复使用的组件来处理使用 Vue.js 通过 AJAX 提交表单。理想情况下，我想要做的是有一个通用组件，可以用来代替 HTML form 元素，因为它可能包含一组未知的表单元素，例如 input、select、textarea 等。

我的名为 ajax-form 的组件有以下代码:

<template>
    <form class="form" :action="action" :method="method" v-on:submit.prevent="ajaxSubmit">
        <slot></slot>
    </form>
</template>

<script>
module.exports = {
    props: {
        action: {
            required: true,
            type: String
        },
        method: {
            default: 'post',
            required: false,
            type: String
        }
    },
    data() {
        return {
            formData: {}
        }
    },
    methods: {
        ajaxSubmit() {
            // Do ajax
        }
    }
}
</script>

在我的 HTML 中，我会有如下内容:

<ajax-form action="http://example.com/do/something">
    <input name="first_name" type="text">
    <textarea name="about_you"></textarea>
</ajax-form>

理想情况下，我希望发生的事情是将所有放置在我的组件内的表单元素使用它的插槽映射到我的 Vue 组件实例中的 data.formData 属性。所以在这种情况下，data 属性看起来像:

data: {
    formData: {
        first_name: '',
        about: ''
    }
}

如果我要在我的 HTML 中向组件添加另一个字段，我希望它也能映射到 Vue 实例的 data 属性。

有什么办法可以实现吗？有没有一种方法可以告诉 Vue，当我通过插槽将表单元素放入组件时，我希望将此元素映射到组件的 data 中的某些内容？

我已经尝试在每个表单元素上添加 v-model 和 v-bind 以查看它是否会以某种方式将数据传递到组件的数据中:

<ajax-form action="http://example.com/do/something">
    <input name="first_name" type="text" v-model="formData.first_name">
</ajax-form>

但是，Vue 提示响应式(Reactive)数据属性必须在模板中使用之前声明:

[Vue warn]: Property or method "formData" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

Answer 1

您可以使用 scopedSlots 来做到这一点。

API 看起来像这样:

<ajax-form action="http://example.com/do/something">
   <template scope="{formData}">    
   <input name="first_name" type="text" v-model="formData.first_name">
   </template>
</ajax-form>

在 ajax-form 组件中:

<form class="form" :action="action" :method="method" v-on:submit.prevent="ajaxSubmit">
   <slot :formData="formData">
</form>