CODEWITHSUNDEEP
javascriptvue.jsvue-component
Kristopher Danday
Kristopher Danday

Reputation: 59

Passing Props in Global Components in Vue

I want to register a component globally while passing some properties, so i can call it anywhere in the page but it seems its not working unless i use inline templates.

I don't want an inline template i want to organize my global component into single directory

import asidecomponent from '@/components/partial/reusable-components/aside-components'

    Vue.component('aside-component', asidecomponent, {
      props: {
        formType: Boolean,
        message: String
      }
    })


  <aside-component formType="true" message="Foo Bar"></aside-component>

but i can't make this thing work any ideas?

Upvotes: 6

Views: 5248

Answers (2)

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

You need to use v-bind method to typecast its value:

 <aside-component :formType="true" :message="'Foo Bar'"></aside-component>

Where you can see:

:formType="true" => passed as boolean
:message="'Foo Bar'" => passed as string (notice to the quote)

For message, you can also use as before as it's just a string.

From the error you mentioned "Property or method "message" is not defined on the instance but referenced during render",

I just noticed that you're not initializing the value. You should be validating props like this:

props: {
  formType: {
     type: Boolean,
     default: false // or set true
  }
  message: {
     type: String,
     default: '' // whatever you want as default
  }
}

So, you should notice here that we're initializing the default value. Now, your error should disappear and work fine.

Ah, and yes, you also need to use extend method for props to work: So, replace this:

Vue.component('aside-component', asidecomponent, {

With this:

Vue.component('aside-component', Vue.extend(asidecomponent), {

See issue here.

Upvotes: 1

roly
roly

Reputation: 220

I think the declaration of your component is wrong. To extend your component definition with the added props, you can use the extends property.

Vue.component('aside-component-with-props', {
  extends: asideComponent,
  props: {
    formType: Boolean,
    message: String
  }
});

Upvotes: 6

Related Questions