Vue - Access child component default props after mounted

Question

I'm trying to figure out what the default properties (props) were for a child component. In this example, I have two components A and B. B wraps around A and A is passed properties. I'd like to figure out what the default values were for the component A from the component B which wraps around it, most importantly the types specified for the defaults. To be clear, in the mounted function of B I'd like to be able to see the default values and types of A assuming B will always have exactly 1 child component.

I've tried getting the child component using this.$children[0]._props in the mounted lifecycle hook, but those properties are the ones set. I've tried getting the properties earlier in the Vue lifecycle (like created, beforeCreate, beforeMount etc.) except they don't seem to exist until mounting. I've also inspected the this.$children[0] object using the browser console, and haven't found any default values for the props (only getter functions which retrieve the override defaults). I'm willing to pass extra data to B in order to get the default properties, but would prefer not to (since it seems redundant, i.e. I should know what the component "origin" was by looking at the this.$children[0] object).

Minimal example is located here: https://codepen.io/maxschommer/pen/wvaqGjx I've included the HTML and JS below for quick reference.

JS:

Vue.component('A', {
  name: "A",
  props: {
        prop1: {
            type: String,
            default: "The First Default Value"
        },
        prop2: {
            type: String,
            default: 'The Second Default Value'
        }
    },
  template: `<div class="A">
<h1>A Prop 1: {{ prop1 }} </h1>
<h1>A Prop 2: {{ prop2 }} </h1>
</div>`
});



Vue.component('B', {
    name: "B",
    mounted: function() {
        this.$children[0];
        // I'd like to find some way to get the default properties
        // of the child of this component (A) here (or in computed, etc.). Instead
        // this gives the values which were set. 
        alert(JSON.stringify(this.$children[0]._props));
    },
    template: 
     `<div><slot></slot></div>`});


var parent = new Vue({
  el: "#app",
  template: 
  `<div class=templateField>
        <B>
            <A prop1="Overriding" prop2="Defaults"></A>
        </B>

</div>`
});

HTML:

<div id="app">
</div>

PS: I'm a bit confused about the difference between components and elements when refering to Vue (I believe components are JS objects and elements are when they are rendered to html) so please correct my terminology if I'm getting it wrong.

Is this more a theoretical question? It seems an odd requirement to know what the default value of a prop was before it gets overridden. — Zaenille
I'm trying to make a wrapper component which can detect all of the types and defaults for inputs for a component, so that a configuration GUI can be made for any component by wrapping it. — user27443

Richard Matsen Richard Matsen · Accepted Answer · 2020-03-03T06:29:20

You can access the original options object (the object you give Vue to construct component instances) from this.$options, so

mounted() {
  const propDfns = this.$options.__proto__.props
  const propTypes = Object.values(propDfns).map(p => p.type.name) 
  console.log(propTypes)
},

Vue - Access child component default props after mounted

2 Answers