这个库完全依赖于vue-class-component,所以在使用这个库之前请阅读它的 README。
1、安装
2、用法
有几个装饰器和 1 个函数(Mixin):
- @Prop
- @PropSync
- @Model
- @ModelSync
- @Watch
- @Provide
- @Inject
- @ProvideReactive
- @InjectReactive
- @Emit
- @Ref
- @VModel
-
@Component
(由vue-class-component提供) -
Mixins
(由vue-class-component提供的辅助函数命名)
3、参照
3.1 @Prop(options: (PropOptions | Constructor[] | Constructor) = {})
装饰器
相当于
3.1.1 如果从其类型定义中设置每个prop值的type
属性,可以使用 reflect-metadata
- 设置
emitDecoratorMetadata
为true
. - 导入
reflect-metadata
前导入vue-property-decorator
(reflect-metadata
只需要导入一次)
3.1.2 每个prop的默认值需要定义为与上面的示例代码相同
不支持定义每个default
属性,例如@Prop() prop = 'default value'
.
3.2 @PropSync(propName: string, options: (PropOptions | Constructor[] | Constructor) = {})
装饰器
相当于
@PropSync 使用方式类似 @Prop ,除将 propName 作为装饰器的参数之外,还在幕后创建了一个计算的 getter 和 setter。通过这种方式,您可以像与常规数据属性一样与属性交互,同时使其像.sync在父组件中附加修饰符一样简单。
3.3 @Model(event?: string, options: (PropOptions | Constructor[] | Constructor) = {})
装饰器
相当于
@Model
也可以通过它的类型定义reflect-metadata
设置type
属性。
3.4 @ModelSync(propName: string, event?: string, options: (PropOptions | Constructor[] | Constructor) = {})
装饰器
相当于
@ModelSyncproperty
也可以通过它的类型定义reflect-metadata
设置type
属性。
3.5 @Watch(path: string, options: WatchOptions = {})
装饰器
相当于
3.6 @Provide(key?: string | symbol)
/ @Inject(options?: { from?: InjectKey, default?: any } | InjectKey)
装饰器
相当于
3.7 @ProvideReactive(key?: string | symbol)
/ @InjectReactive(options?: { from?: InjectKey, default?: any } | InjectKey)
装饰器
这些装饰器是@Provide
和的反应式版本@Inject
。如果父组件修改了提供的值,则子组件可以捕获此修改。
3.8 @Emit(event?: string)
装饰器
由@Emit
$emit
后跟它们的原始参数作为返回值修饰的函数。如果返回值是一个 Promise,它会在发出之前被解析。
如果未通过event
参数提供事件名称,则使用函数名称。在这种情况下,camelCase 名称将转换为 kebab-case。
相当于
3.9 @Ref(refKey?: string)
装饰器
相当于
3.10 @VModel(propsArgs?: PropOptions)
装饰器
相当于