经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
详解vue-property-decorator使用手册
来源:jb51  时间:2019/7/30 9:19:03  对本文有异议

一,安装

npm i -s vue-property-decorator

二,用法

1,@Component(options:ComponentOptions = {})

@Component 装饰器可以接收一个对象作为参数,可以在对象中声明 components ,filters,directives 等未提供装饰器的选项

虽然也可以在 @Component 装饰器中声明 computed,watch 等,但并不推荐这么做,因为在访问 this 时,编译器会给出错误提示

  1. import { Vue, Component } from 'vue-property-decorator'
  2.  
  3. @Component({
  4. filters: {
  5. toFixed: (num: number, fix: number = 2) => {
  6. return num.toFixed(fix)
  7. }
  8. }
  9. })
  10. export default class MyComponent extends Vue {
  11. public list: number[] = [0, 1, 2, 3, 4]
  12. get evenList() {
  13. return this.list.filter((item: number) => item % 2 === 0)
  14. }
  15. }

2,@Prop(options: (PropOptions | Constructor[] | Constructor) = {})

@Prop 装饰器接收一个参数,这个参数可以有三种写法:

  • Constructor ,例如 String,Number,Boolean 等,指定 prop 的类型;
  • Constructor[] ,指定 prop 的可选类型;
  • PropOptions ,可以使用以下选项: type,default,required,validator 。
  1. import { Vue, Component, Prop } from 'vue-property-decorator'
  2. @Componentexport default class MyComponent extends Vue {
  3. @Prop(String) propA: string | undefined
  4. @Prop([String, Number]) propB!: string | number
  5. @Prop({
  6. type: String,
  7. default: 'abc'
  8. })
  9. propC!: string
  10. }

等同于下面的 js 写法

  1. export default {
  2. props: {
  3. propA: {
  4. type: Number
  5. },
  6. propB: {
  7. default: 'default value'
  8. },
  9. propC: {
  10. type: [String, Boolean]
  11. }
  12. }
  13. }

注意:

  • 属性的ts类型后面需要加上 undefined 类型;或者在属性名后面加上!,表示 非null 和 非undefined
  • 的断言,否则编译器会给出错误提示;
  • 指定默认值必须使用上面例子中的写法,如果直接在属性名后面赋值,会重写这个属性,并且会报错。

3,@PropSync(propName: string, options: (PropOptions | Constructor[] | Constructor) = {})

  • @PropSync 装饰器与 @prop 用法类似,二者的区别在于:
  • @PropSync 装饰器接收两个参数: 

propName: string 表示父组件传递过来的属性名; 

options: Constructor | Constructor[] | PropOptions 与 @Prop 的第一个参数一致;

@PropSync 会生成一个新的计算属性。

  1. import { Vue, Component, PropSync } from 'vue-property-decorator'
  2. @Component
  3. export default class MyComponent extends Vue {
  4. @PropSync('propA', { type: String, default: 'abc' }) syncedPropA!: string
  5. }

等同于下面的 js 写法

  1. export default {
  2. props: {
  3. propA: {
  4. type: String,
  5. default: 'abc'
  6. }
  7. },
  8. computed: {
  9. syncedPropA: {
  10. get() {
  11. return this.propA
  12. },
  13. set(value) {
  14. this.$emit('update:propA', value)
  15. }
  16. }
  17. }
  18. }

注意: @PropSync 需要配合父组件的 .sync 修饰符使用

4,@Model(event?: string, options: (PropOptions | Constructor[] | Constructor) = {})

@Model 装饰器允许我们在一个组件上自定义 v-model ,接收两个参数:

event: string 事件名。

options: Constructor | Constructor[] | PropOptions 与 @Prop 的第一个参数一致。

  1. import { Vue, Component, Model } from 'vue-property-decorator'
  2. @Component
  3. export default class MyInput extends Vue {
  4. @Model('change', { type: String, default: '123' }) value!: string
  5. }

等同于下面的 js 写法

  1. export default {
  2. model: {
  3. prop: 'value',
  4. event: 'change'
  5. },
  6. props: {
  7. value: {
  8. type: String,
  9. default: '123'
  10. }
  11. }
  12. }

上面例子中指定的是 change 事件,所以我们还需要在 template 中加上相应的事件:

  1. <template>
  2. <input
  3. type="text"
  4. :value="value"
  5. @change="$emit('change', $event.target.value)"
  6. />
  7. </template>

对 自定义v-model 不太理解的同学,可以查看 自定义事件

5,@Watch(path: string, options: WatchOptions = {})

@Watch 装饰器接收两个参数:

path: string 被侦听的属性名;
options?: WatchOptions={} options 可以包含两个属性 :

immediate?:boolean 侦听开始之后是否立即调用该回调函数;

deep?:boolean 被侦听的对象的属性被改变时,是否调用该回调函数;

侦听开始,发生在 beforeCreate 勾子之后, created 勾子之前

  1. import { Vue, Component, Watch } from 'vue-property-decorator'
  2.  
  3. @Component
  4. export default class MyInput extends Vue {
  5. @Watch('msg')
  6. onMsgChanged(newValue: string, oldValue: string) {}
  7.  
  8. @Watch('arr', { immediate: true, deep: true })
  9. onArrChanged1(newValue: number[], oldValue: number[]) {}
  10.  
  11. @Watch('arr')
  12. onArrChanged2(newValue: number[], oldValue: number[]) {}
  13. }

等同于下面的 js 写法

  1. export default {
  2. watch: {
  3. msg: [
  4. {
  5. handler: 'onMsgChanged',
  6. immediate: false,
  7. deep: false
  8. }
  9. ],
  10. arr: [
  11. {
  12. handler: 'onArrChanged1',
  13. immediate: true,
  14. deep: true
  15. },
  16. {
  17. handler: 'onArrChanged2',
  18. immediate: false,
  19. deep: false
  20. }
  21. ]
  22. },
  23. methods: {
  24. onMsgVhanged(newValue, oldValue) {},
  25. onArrChange1(newValue, oldValue) {},
  26. onArrChange2(newValue, oldValue) {}
  27. }
  28. }

6,@Emit(event?: string)

  • @Emit 装饰器接收一个可选参数,该参数是 $Emit 的第一个参数,充当事件名。如果没有提供这个参数, $Emit 会将回调函数名的 camelCase 转为 kebab-case ,并将其作为事件名;
  • @Emit 会将回调函数的返回值作为第二个参数,如果返回值是一个 Promise 对象, $emit 会在 Promise 对象被标记为 resolved 之后触发;
  • @Emit 的回调函数的参数,会放在其返回值之后,一起被 $emit 当做参数使用。
  1. import { Vue, Component, Emit } from 'vue-property-decorator'
  2.  
  3. @Component
  4. export default class MyComponent extends Vue {
  5. count = 0
  6. @Emit()
  7. addToCount(n: number) {
  8. this.count += n
  9. }
  10. @Emit('reset')
  11. resetCount() {
  12. this.count = 0
  13. }
  14. @Emit()
  15. returnValue() {
  16. return 10
  17. }
  18. @Emit()
  19. onInputChange(e) {
  20. return e.target.value
  21. }
  22. @Emit()
  23. promise() {
  24. return new Promise(resolve => {
  25. setTimeout(() => {
  26. resolve(20)
  27. }, 0)
  28. })
  29. }
  30. }

等同于下面的 js 写法

  1. export default {
  2. data() {
  3. return {
  4. count: 0
  5. }
  6. },
  7. methods: {
  8. addToCount(n) {
  9. this.count += n
  10. this.$emit('add-to-count', n)
  11. },
  12. resetCount() {
  13. this.count = 0
  14. this.$emit('reset')
  15. },
  16. returnValue() {
  17. this.$emit('return-value', 10)
  18. },
  19. onInputChange(e) {
  20. this.$emit('on-input-change', e.target.value, e)
  21. },
  22. promise() {
  23. const promise = new Promise(resolve => {
  24. setTimeout(() => {
  25. resolve(20)
  26. }, 0)
  27. })
  28. promise.then(value => {
  29. this.$emit('promise', value)
  30. })
  31. }
  32. }
  33. }

7,@Ref(refKey?: string)

@Ref 装饰器接收一个可选参数,用来指向元素或子组件的引用信息。如果没有提供这个参数,会使用装饰器后面的属性名充当参数

  1. import { Vue, Component, Ref } from 'vue-property-decorator'
  2. import { Form } from 'element-ui'
  3.  
  4. @Componentexport default class MyComponent extends Vue {
  5. @Ref() readonly loginForm!: Form
  6. @Ref('changePasswordForm') readonly passwordForm!: Form
  7.  
  8. public handleLogin() {
  9. this.loginForm.validate(valide => {
  10. if (valide) {
  11. // login...
  12. } else {
  13. // error tips
  14. }
  15. })
  16. }
  17. }

等同于下面的 js 写法

  1. export default {
  2. computed: {
  3. loginForm: {
  4. cache: false,
  5. get() {
  6. return this.$refs.loginForm
  7. }
  8. },
  9. passwordForm: {
  10. cache: false,
  11. get() {
  12. return this.$refs.changePasswordForm
  13. }
  14. }
  15. }
  16. }

@Provide/@Inject 和 @ProvideReactive/@InhectReactive

由于平时基本不用到provide/inject选项,暂时先放着,以后有时间再研究

参考: https://github.com/kaorun343/...

总结

以上所述是小编给大家介绍的vue-property-decorator使用手册,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对w3xue网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号