Vue: Passing props to root instance

[iamvitali]

Version

2.4.2

Reproduction link

https://jsfiddle.net/1madr5ze/
Although putting it into data works: https://jsfiddle.net/t1t4teeo/

Steps to reproduce

Declare a prop for the root application instance.
Pass the prop to the <div> that represents the root of the app.

What is expected?

The root app should have the props data.

What is actually happening?

The props data isn't showing up.

[LinusBorg]

That's expected behaviour, it's simply not supported.

[posva]

You may be interested in https://vuejs.org/v2/api/#propsData

edit: I suggest you to ask your real problem on the forum or Discord server, I'm sure we can come with a way to help you

[iamvitali]

@posva https://jsfiddle.net/jmf5f70k/

I have tried it but not sure anything changed after changing it from props to propsData. :/
Although from the docs it seems that propsData is pretty much data but without using the function. :)

It seems that a popular workaround for this is creating a child component which you treat as your root component and then throwing all the children there, so that it's sort of looks like:

<div id='#app'>
    <app :all-the-root-props-go-here="">
        <component1 :some-of-the-root-props=""></component1>
        <component2 :some-of-the-root-props=""></component2>
        <component3 :some-of-the-root-props=""></component3>
        <component4></component4>
    </app>
</div>

So then after looking at that I'm thinking ... why is the root instance different from the component instances when it's essentially just a component itself? :)

I guess that main use I see in this is ... avoiding duplication of my PHP code where I declare the same prop in multiple places (components), and only putting the actual value once for the root and for the children to use the root's prop value and not having it declared again (so say I want to change the code for setting that prop value, currently I need to change all my components to the new code, whereas if I only pass the prop once to the root then there's just one place to change it).

[LinusBorg]

So then after looking at that I'm thinking ... why is the root instance different from the component instances when it's essentially just a component itself? :)

• Props are for passing data form a parent component to a child component.
• The main instance is the root component, it has no parent component.
• HTML Attributes on the element you mount to are not props.
• Hence, making this work as you want it to would require extra code in Vue's core to act as if the mount element was some kind of parent component, and pass attribute values to props.

I would advise you to just go with the main child component. It really is an established pattern.