javascript - Passing Props in Global Components in Vue - Stack Overflow

admin管理员组

文章数量:1316018

I want to register a ponent 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 ponent into single directory

import asideponent from '@/ponents/partial/reusable-ponents/aside-ponents'

    Vueponent('aside-ponent', asideponent, {
      props: {
        formType: Boolean,
        message: String
      }
    })


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

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

I want to register a ponent 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 ponent into single directory

import asideponent from '@/ponents/partial/reusable-ponents/aside-ponents'

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


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

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

• javascript
• vue.js
• vue-ponent

Share Improve this question Follow asked Mar 8, 2018 at 5:04 Kristopher DandayKristopher Danday 5911 silver badge55 bronze badges 2

• Are you getting any errors? Sharing them could help. – Gokul Chandrasekaran Commented Mar 8, 2018 at 5:26
• There's an error that says " Property or method "message" is not defined on the instance but referenced during render" – Kristopher Danday Commented Mar 8, 2018 at 6:03

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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

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

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

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

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.ponent('aside-ponent', asideponent, {

With this:

Vue.ponent('aside-ponent', Vue.extend(asideponent), {

See issue here.

本文标签： javascriptPassing Props in Global Components in VueStack Overflow