CODEWITHSUNDEEP
javascripttypescriptvue.js
Xavier Peña
Xavier Peña

Reputation: 7899

Passing props to root instances in Vue.js

The problem

I am trying to pass a prop to my root constructor. I understand that propsData is the way to go:

var appComponent = Vue.component('app', require('./components/app/app.vue.html'));
new Vue({
    el: '#app-root',
    router: new VueRouter({ mode: 'history', routes: routes }),
    propsData: { test: 'hi!' },
    components: { appComponent },
    render: h => h('app')
});

This is the AppComponent that receives the prop:

export default class AppComponent extends Vue {

    @Prop()
    test: string;

    mounted() {
        console.log('test = ' + this.test);
        // result: test = undefined
        // expected: test = 'hi!'
    }
}

Things I have tried

The only way to make it work in development (not in production) was:

test: string;

beforeCreate() {
    this.test = this.$root.test;
}

It work on development (windows), but in deployment (linux) I got this typescript error:

ERROR in [at-loader] ClientApp/components/app/app.ts:14:34
    TS2339: Property 'test' does not exist on type 'Vue'.

Here is another post talking about this.

Upvotes: 5

Views: 5284

Answers (1)

Vamsi Krishna
Vamsi Krishna

Reputation: 31362

You can pass props in the data object which is the 2nd argument the createElement alias h function takes in the render option

render: h => h('app', { props: { test: 'hi!' }})

Upvotes: 13

Related Questions