美文网首页
vue-property-decorator使用指南

vue-property-decorator使用指南

作者: Shuffle_5354 | 来源:发表于2019-03-20 11:44 被阅读0次

    在Vue中使用TypeScript时,非常好用的一个库,使用装饰器来简化书写。
    注:非商业转载
    文章出处链接:https://juejin.im/post/5c173a84f265da610e7ffe44

    1、安装npm install --save vue-property-decorator

    • @Component (from vue-class-component)
    • @Prop
    • @Model
    • @Watch
    • @Emit
    • @Inject
    • @Provide
    • Mixins (the helper function named mixins defined at vue-class-component)

    2、@Component

    js写法

    
    import {componentA,componentB} from '@/components';
    
    export default{
        components:{
            componentA,
            componentB,
        },
        directives: {
            focus: {
                // 指令的定义
                inserted: function (el) {
                    el.focus()
                }
            }
        }
    }
    
    

    ts写法

    
    import {Component,Vue} from 'vue-property-decorator';
    import {componentA,componentB} from '@/components';
    
     @Component({
        components:{
            componentA,
            componentB,
        },
        directives: {
            focus: {
                // 指令的定义
                inserted: function (el) {
                    el.focus()
                }
            }
        }
    })
    export default class YourCompoent extends Vue{
       
    }
    
    

    3、@Prop 父子组件之间值的传递

    js写法

    
    export default{
        props:{
            propA:String, // propA:Number
            propB:[String,Number],
            propC:{
                type:Array,
                default:()=>{
                    return ['a','b']
                },
                required: true,
                validator:(value) => {
                    return [
                        'a',
                        'b'
                     ].indexOf(value) !== -1
            }
        }
    }
    }
    
    

    ts写法

    
    import {Component,Vue,Prop} from vue-property-decorator;
    
    @Component
    export default class YourComponent extends Vue {
        @Prop(String)
        propA:string;
        
        @Prop([String,Number])
        propB:string|number;
        
        @Prop({
         type: String, // type: [String , Number]
         default: 'default value', // 一般为String或Number
          //如果是对象或数组的话。默认值从一个工厂函数中返回
          // defatult: () => {
          //     return ['a','b']
          // }
         required: true,
         validator: (value) => {
            return [
              'InProcess',
              'Settled'
            ].indexOf(value) !== -1
         }
        })
        propC:string;
        
        
    }
    
    

    4、@Model (组件之间,checkbox)

    父组件中使用 v-model="checked" 子组件

    
    <input  type="checkbox" :checked="checked" @change="change">
    
    

    js写法 ==(2.2.0+ 新增)==

    
     export default {
         model:{
             prop:'checked',
             event:'change'
         },
         props:{
             checked:{
                 type:Boolean
             }
         },
         methods:{
             change(e){
                 this.$emit('change', e.target.checked)
             }
         }
     }
    
    

    ts写法

    
    import {Vue,Component,Model,Emit} from 'vue-property-decorator';
    
    @Component
    export default class YourComponent extends Vue{
    
        @Model('change',{
            type:Boolean
        })
        checked!:boolean;
        
        @Emit('change')
        change(e:MouseEvent){}
        
    }
    
    

    5、@Watch

    js写法

    
    export default {
      watch: {
        'person': {
          handler: 'onPersonChanged',
          immediate: true,
          deep: true
        }
      },
      methods: {
        onPersonChanged(val, oldVal) { }
      }
    }
    
    

    ts写法

    
    import {Vue, Component, Watch} from 'vue-property-decorator';
    
    @Component
    export default class YourComponent extends Vue{
        @Watch('person', { immediate: true, deep: true })
        onPersonChanged(val: Person, oldVal: Person) { }
    }
    
    

    6、@Emit

    
    由@Emit $emit 定义的函数发出它们的返回值,后跟它们的原始参数。 如果返回值是promise,则在发出之前将其解析。
    
    
    
    如果事件的名称未通过事件参数提供,则使用函数名称。 在这种情况下,camelCase名称将转换为kebab-case。
    
    

    js写法

    
    export default {
      data() {
        return {
          count: 0
        }
      },
      methods: {
        addToCount(n) {
          this.count += n
          this.$emit('add-to-count', n)
        },
        resetCount() {
          this.count = 0
          this.$emit('reset')
        },
        returnValue() {
          this.$emit('return-value', 10)
        },
        promise() {
          const promise = new Promise(resolve => {
            setTimeout(() => {
              resolve(20)
            }, 0)
          })
    
          promise.then(value => {
            this.$emit('promise', value)
          })
        }
      }
    }
    
    

    ts写法

    
    import { Vue, Component, Emit } from 'vue-property-decorator'
    
    @Component
    export default class YourComponent extends Vue {
      count = 0
    
      @Emit()
      addToCount(n: number) {
        this.count += n
      }
    
      @Emit('reset')
      resetCount() {
        this.count = 0
      }
    
      @Emit()
      returnValue() {
        return 10
      }
    
      @Emit()
      promise() {
        return new Promise(resolve => {
          setTimeout(() => {
            resolve(20)
          }, 0)
        })
      }
    }
    
    
    

    7、@Provide 提供 / @Inject 注入

    
    注:父组件不便于向子组件传递数据,就把数据通过Provide传递下去,然后子组件通过Inject来获取
    
    

    js写法

    
    const symbol = Symbol('baz')
    
    export const MyComponent = Vue.extend({
    
      inject: {
        foo: 'foo',
        bar: 'bar',
        'optional': { from: 'optional', default: 'default' },
        [symbol]: symbol
      },
      data () {
        return {
          foo: 'foo',
          baz: 'bar'
        }
      },
      provide () {
        return {
          foo: this.foo,
          bar: this.baz
        }
      }
    })
    
    

    ts写法

    
    import {Vue,Component,Inject,Provide} from 'vue-property-decorator';
    
    const symbol = Symbol('baz')
    
    @Component
    export defalut class MyComponent extends Vue{
        @Inject()
        foo!: string;
        
        @Inject('bar')
        bar!: string;
        
        @Inject({
            from:'optional',
            default:'default'
        })
        optional!: string;
        
        @Inject(symbol)
        baz!: string;
        
        @Provide()
        foo = 'foo'
        
        @Provide('bar')
        baz = 'bar'
    }
    
    

    更多内容参考: vue-property-decorator

    相关文章

      网友评论

          本文标题:vue-property-decorator使用指南

          本文链接:https://www.haomeiwen.com/subject/dsxzmqtx.html