Passing parent props to children

Question

I've been trying to create a "customable form template" using Vue.js. The logic I wanted to apply is as follows:

• I created a "custom-form" component that takes a vueForm prop and renders a form. The vueForm prop is an object with a specific structure, containing fields and errors keys.
• I created a "custom-input" component that takes multiple props, including the value (for the v-model) and errors... which happens to be available in our vueForm object mentionned before

My problem is that I can't seem to access the vueForm object passed as prop in the custom-form FROM my custom-input :(. I've tried adding it to data, using provide/inject, etc. No success so far.

Any help would be greatly appreciated :)

Thanks

Below a sample of the code:

COMPONENTS

// 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

If you want to bubble date from your child component you can use the $emit function as per the official documentation: https://v2.vuejs.org/v2/guide/components.html#Emitting-a-Value-With-an-Event