title: Passing parent props to children
body: <p>I've been trying to create a "customable form template" using Vue.js. The logic I wanted to apply is as follows:</p>
  
  <ul>
  <li>I created a "custom-form" component that takes a <code>vueForm</code> prop and renders a form. The <code>vueForm</code> prop is an object with a specific structure, containing <code>fields</code> and <code>errors</code> keys.</li>
  <li>I created a "custom-input" component that takes multiple props, including the <code>value</code> (for the v-model) and <code>errors</code>... <strong>which happens to be available in our <code>vueForm</code> object mentionned before</strong></li>
  </ul>
  
  <p>My problem is that I can't seem to access the <code>vueForm</code> object passed as prop in the <code>custom-form</code> FROM my <code>custom-input</code> :(. I've tried adding it to data, using provide/inject, etc. No success so far.</p>
  
  <p>Any help would be greatly appreciated :)</p>
  
  <p>Thanks</p>
  
  <p>Below a sample of the code:</p>
  
  <p><strong>COMPONENTS</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>// PARENT COMPONENT
  Vue.component("custom-form", {
      props: {
          vueForm: Object,
      },
      template:
          `&lt;form :id="vueForm.id" :method="vueForm.method" action=""&gt;
              &lt;slot&gt;&lt;/slot&gt;
          &lt;/form&gt;`,
  });
  
  // CHILD COMPONENT
  Vue.component("custom-input", {
      props: {
          name: String,
          type: String,
          placeholder: String,
          icon: String,
          value: [String, Number, Date],
          errors: Array,
      },
      template:
          `&lt;div class="field"&gt;
              &lt;div class="control has-icons-left has-icons-right"&gt;
                  &lt;span class="icon is-small is-left"&gt;
                      &lt;i :class="icon"&gt;&lt;/i&gt;
                  &lt;/span&gt;
                  &lt;input
                      class="input"
                      :type="type"
                      :name="name"
                      :placeholder="placeholder"
                      v-on:input="$emit('input', $event.target.value)"
                  &gt;
                  &lt;span class="icon is-small is-right" v-if="errors.length"&gt;
                      &lt;i class="fas fa-exclamation-triangle"&gt;&lt;/i&gt;
                  &lt;/span&gt;
                  &lt;p class="help is-danger" v-for="message in errors"&gt;
                      {{message}}
                  &lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;`,
  });
  </code></pre>
  
  <p><strong>VUE</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>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: "",
              },
          },
      },
  });
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;custom-form :vue-form="authForm"&gt; &lt;!-- Passing authFrom as our vueForm prop --&gt;
  
      &lt;custom-input
          name="email"
          type="email"
          placeholder="Email"
          icon="fas fa-envelope"
          :value="vueForm.fields.email"  &lt;!-- vueForm is not defined :( --&gt;
          :errors="vueForm.errors.email" &lt;!-- vueForm is not defined :( --&gt;
      &gt;&lt;/custom-input&gt;
  
      &lt;button
          class="button is-primary"
          @click.prevent="submitForm"
      &gt;
          &lt;span class="icon is-small"&gt;
              &lt;i class="fas fa-check"&gt;&lt;/i&gt;
          &lt;/span&gt;
          &lt;span&gt;{% trans "Submit" %}&lt;/span&gt;
      &lt;/button&gt;
  
  &lt;/custom-form&gt;
  </code></pre>