Vue 装饰器 vue-property-decorator

Question

vue-property-decorator

 详细阅读

• @Prop
• @PropSync
• @Model
• @ModelSync
• @Watch
• @Provide
• @Inject
• @ProvideReactive
• @InjectReactive
• @Emit
• @Ref
• @VModel
• @Component ( provided by vue-class-component )
• Mixins (the helper function named mixins provided by vue-class-component )

@Component

格式： @Component(options:ComponentOptions = {})

@Component 装饰器可以接收一个对象作为参数，可以在对象中声明 components ， filters ， directives 等未提供装饰器的选项，虽然也可以在 @Component 装饰器中声明 computed ， watch 等，但并不推荐这么做，因为在访问 this 时，编译器会给出错误提示，即使没有组件也不能省略 @Component ，否则会报错。

import {Component,Vue} from 'vue-property-decorator';
import {componentA,componentB} from '@/components';

 @Component({
  name:"name",
    components:{
        componentA,
        componentB,
    },
    directives: {
        focus: {
            // 指令的定义
            inserted: function (el) {
                el.focus()
            }
        }
    }
})
export default class YourCompoent extends Vue{ }

@Prop

父子组件之间值的传递

格式： @Prop(options: (PropOptions | Constructor[] | Constructor) = {})

• Constructor ：例如 String ， Number ， Boolean 等，指定 prop 的类型；
• Constructor[] ：指定 prop 的可选类型；
• PropOptions ：可以使用以下选项： type ， default ， required ， validator 。

import { Vue, Component, Prop } from 'vue-property-decorator'

@Component
export default class YourComponent extends Vue {
  @Prop(Number) readonly propA: number | undefined
  @Prop({ default: 'default_value' }) readonly propB!: string
  @Prop([String, Boolean]) readonly propC: string | boolean | undefined
}

注意