Question

我一直在尝试使用Vue.js创建“可自定义表单模板”。我想应用的逻辑如下：

我创建了一个使用vueForm属性并呈现表单的“自定义表单”组件。 vueForm属性是具有特定结构的对象，包含fields和errors键。
我创建了一个“自定义输入”组件，该组件需要多个道具，包括value（用于v模型）和errors ... vueForm之前提到的对象

我的问题是我似乎无法从vueForm访问custom-form中作为道具传递的custom-input对象：(。我试图将其添加到数据中，使用Provide / Inject等。到目前为止没有成功。

任何帮助将不胜感激：）

谢谢

下面的代码示例：

组件

// PARENT COMPONENT
Vue.component("custom-form", {
    props: {
        vueForm: Object,
    },
    template:
        `<form :id="vueForm.id" :method="vueForm.method" action="">
            <slot></slot>
        </form>`,
});

// CHILD COMPONENT
Vue.component("custom-input", {
    props: {
        name: String,
        type: String,
        placeholder: String,
        icon: String,
        value: [String, Number, Date],
        errors: Array,
    },
    template:
        `<div class="field">
            <div class="control has-icons-left has-icons-right">
                <span class="icon is-small is-left">
                    <i :class="icon"></i>
                </span>
                <input
                    class="input"
                    :type="type"
                    :name="name"
                    :placeholder="placeholder"
                    v-on:input="$emit('input', $event.target.value)"
                >
                <span class="icon is-small is-right" v-if="errors.length">
                    <i class="fas fa-exclamation-triangle"></i>
                </span>
                <p class="help is-danger" v-for="message in errors">
                    {{message}}
                </p>
            </div>
        </div>`,
});

VUE

var mainVue = new Vue({
    el: "main",
    data: {
        loginTab: true,
        authForm: {
            id: "user-form",
            method: "POST",
            errors: {
                non_field_errors: [],
                email: [],
                password: [],
                confirm_password: [],
            },
            fields: {
                email: "",
                password: "",
                confirm_password: "",
            },
        },
    },
});

HTML

<custom-form :vue-form="authForm"> <!-- Passing authFrom as our vueForm prop -->

    <custom-input
        name="email"
        type="email"
        placeholder="Email"
        icon="fas fa-envelope"
        :value="vueForm.fields.email"  <!-- vueForm is not defined :( -->
        :errors="vueForm.errors.email" <!-- vueForm is not defined :( -->
    ></custom-input>

    <button
        class="button is-primary"
        @click.prevent="submitForm"
    >
        <span class="icon is-small">
            <i class="fas fa-check"></i>
        </span>
        <span>{% trans "Submit" %}</span>
    </button>

</custom-form>

Answer 1

如果您想从子组件中添加日期，可以按照官方文档使用$ emit函数： https://vuejs.org/v2/guide/components.html#Emitting-a-Value-With-an-Event

将父母的道具传递给孩子

1 个答案: