repository·master·Indexed 26 days ago
https://github.com/kaorun343/vue-property-decoratorA deprecated library providing TypeScript decorators for Vue.js components to enable a class-based programming model. It allows defining props, watchers, provides, injects, and emits using decorators such as @Prop, @Watch, @Provide, @Inject, @Emit, and @Ref. Version 9.1.2 depends on vue-class-component.
Install the library using npm:
npm i -S vue-property-decoratorNote: This library is deprecated and no longer actively maintained. For community-maintained class-based Vue components, consider using vue-facing-decorator. This library depends on vue-class-component, so you should also review its documentation.
The library provides specialized injection decorators for reactive dependency injection:
@InjectReactive: Injects a reactive dependency.@ProvideReactive: Provides a reactive dependency.Use the @Emit decorator to automatically emit Vue component events when a method is called.
By default, the emitted event name is the kebab-case version of the method name. If you provide a string argument to @Emit(eventName), that specific name will be used instead.
Behavioral Rules:
myMethod becomes my-method).undefined and has no arguments, it emits the event without payload.undefined and has arguments, it emits the event with those arguments.$emit.Promise, the event will be emitted only after the promise resolves, using the resolved value as the event payload.Component decorator is used to define a Vue component class. It is exported from vue-class-component and re-exported by this library. You should also export Vue and Mixins from this package for type safety and mixin usage.@Ref decorator to access a component or element that has been assigned a ref attribute in the template.@Prop to define props in your component. For two-way binding (v-model style) with automatic event emitting, use @PropSync.@Provide to make a property available to all descendant components, and @Inject to retrieve a provided property in a child component.@Model to define a property that supports v-model binding. Use @ModelSync for two-way binding with a specific property name.@Emit decorator to define which method call should trigger a specific Vue event.@Watch decorator to observe changes to a specific property and execute a callback function.Use the @Inject decorator to inject dependencies into a Vue component via the inject option.
You can provide the injection key directly, or pass an options object to specify a different key to use for the injection (from) or a default value.
Arguments:
options (optional): An object of type InjectOptions or an InjectKey.from: The specific key to use for the injection.default: The default value to use if the dependency is not found.key (required): The property name on the class where the injected dependency will be assigned.@InjectReactive decorator allows you to inject a reactive dependency into a Vue component. It works by injecting a key (internally using reactiveInjectKey) and then creating a computed property with the same name as the decorated property. This computed property resolves to the value of the injected object's specific key, ensuring reactivity is maintained.