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?
Share Improve this question asked Mar 8, 2018 at 5:04 Kristopher DandayKristopher Danday 591 silver badge5 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
2 Answers
Reset to default 6I 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.