itsfrank / vue-typescript

Typescript decorators to make vue feel more typescripty
MIT License
358 stars 25 forks source link

how to create a local register component? #5

Open noteon opened 7 years ago

noteon commented 7 years ago

It seems that all vue-typescript component is global register. call vue.component()?

I want to know, how to create a local register component?

var Parent = Vue.extend({ template: '...', components: { // will only be available in Parent's template 'my-component': Child } })

itsfrank commented 7 years ago

The @VueComponent decorator takes an object just like vue.extend(), so any parameter of the object you would give to extend is valid in VueComponent.

Hence, intead of doing

import 'mycomponent.ts'

simply do

import { VueComponent } from 'vue-typescript'
import { MyComponent } from 'mycomponent.ts'

@VueComponent({
    template: require('template.html'),
    components: {
        myc: MyComponent
    }
})
export class ParentComponent extends Vue {
    ...
}

then <myc></myc> in your template should add an instance of MyComponent

itsfrank commented 7 years ago

I think i see your issue, the solution i proposed above will allow you to set aliases, however the component will still be registered globally, Ill look into adding a way to specify if you want VueComponent to call Vue.extend instead of Vue.component

noteon commented 7 years ago

Yes, I want to create a local-register only component.

itsfrank commented 7 years ago

Yup, ive given it some thought and I'm think on adding this as an additional signature to VueComponent:

@VueComponent(options:ComponentOptions, local:Boolean) where if you define something like this:

@Vuecomponent({
        template: '<p>hello</p>'
    },
    true)
export class LocalComponent {...

or, i'm also considering adding @VueLocalComponent instead which would have the same signatures as VueComponent, but simply return the Vue.extend() result, instead of registering globally.

Currently i'm leaning on the second option as there are already 4 different signatures to VueComponent and the first option would require adding 4 more.

It should be available in the next release in a few days.

Thanks for pointing this out