How to Build a Component From Props?

I’ve got one more question for you guys here, if you don’t mind. I’ve got a conceptually simple problem but it’s totally got me stopped.

The goal is to take some props from where I write my component and then do something with them during construction, but inside the “components” section specifically. Alternatively, I could do it inside of “mounted” if there was a way to reference those components afterward, but I haven’t found it.

The challenge is that I can’t get access to props, or even to “this” in the “components” section. Yet when I try to make the changes inside of “mounted” or even “beforeCreate”, it is too late in the lifecycle and the template remains unchanged.

Something like this is what I want:

<script>
    export default {
        components: {
            ChildComponent
        }
    }
</script>

<template>
    <ChildComponent styleMode="wedding" />
</template>

And then have it receive the styleMode like this:

<script>
// Child Component
let buildStyles = function(styleMode) {
    if (styleMode === 'wedding') {
        return // whatever you want in terms of styling here
    } else if { ... }
}

export default {
    // Child
    components: {
        FormattedChild: buildStyles(this.$props.styleMode)
    }
</script>

<template>
    <FormattedChild />
</template>

In that place that I’m trying to reference “this” in order to assign a value to FormattedChild, it is always undefined, but I would think getting at it should be possible (similar to how constructors work).

I admit that I’m using vue-styled-components here, but the principle should carry over regardless of the approach or libraries, that is to say, “How do I set up child components based on props if I don’t have access to props as I’m defining them?”

Thanks.

I’ll say that my plan for this is to use child selectors in the final component, but I really wish I knew a way to do object construction from props for future use cases…