CODEWITHSUNDEEP
javascriptvue.js
Martyn Ball
Martyn Ball

Reputation: 4885

Access props passed into child without defining them

I have got a component which is basically the middle man to display a child.

<template>
    <component v-bind:is="component" v-bind="$props" @event="captureEvent($event)"></component>
</template>
<script>
export default {
    props: {
        facet: {
            required: true,
            type: Object
        },
        data: {
            required: true,
            type: Array|Boolean
        },
        label: {
            required: true,
            type: String
        }
    },
    methods: {
        captureEvent(event) {

        },
    },
    computed: {
        component() {
            return () => import(`./Layouts/${this.facet.layout.toPascalCase()}`)
        }
    }
}
</script>

So as you can see the actual component is loaded in using the settings. I don't want to redefine the props for the child and the middle man.

Is there a way I can pass them through my middle man into the child without defining them twice?

This is the child, I have tried to use the $props object but this appears to be empty.

<template>
    <div v-show="data.length" class="checkbox-list" :class="{ open }">
        <span class="checkbox-list__title">{{ $props['label'] }}</span>
        <ul class="checkbox-list__items">
            <li>Items</li>
        </ul>
    </div>
</template>
<script>
export default {
    data: function() {
        return {
            open: false
        }
    }
}
</script>

Upvotes: 1

Views: 45

Answers (1)

Michal Lev&#253;
Michal Lev&#253;

Reputation: 37833

$props object just reflects the props passed into a component which are declared on the component (using props: {} section)

What you want is to use $attrs instead

Contains parent-scope attribute bindings (except for class and style) that are not recognized (and extracted) as props. When a component doesn’t have any declared props, this essentially contains all parent-scope bindings (except for class and style), and can be passed down to an inner component via v-bind="$attrs" - useful when creating higher-order components.

You might also want to use inheritAttrs option in your "man in the middle" (or wrapper) component.

Read Non-Prop Attributes

Also If you are interested in building so called "transparent wrapper" components, watch this Chris Fritz talk - he has some good advice and "tricks" for you...

Upvotes: 1

Related Questions