vue2.x 中使用typescript 组件vue-property-decorator的使用

vue-property-decorator组件依赖于vue-class-components

@Component

这个属性是写组件的核心，他一般作为装饰器植入我们所写的组件class内

而他也可以通过设置参数来讲一些额外的属性注入class内

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import Button from './components/Button.vue'

@Component({
  components: {
    Button 
  },
  data(){
    return{
      i:66
    };
  },
  computed:{
    aaa:{
      get(){
        return this.i*1000;
      },
      set(val){
        this.i=val/10;
      }
    }
  },
  watch: {
    aaa(){
      console.log(66666666666666);
    }
  },
  methods:{
    gogo(){
      this.aaa=50;
    }
  }
})
export default class App extends Vue {
  
}
</script>

 

 

 由此可以通过@Component引入其他组件，也可以在其内部设定其他属性，所有的组件信息都可以在这里设置（methods，props，watch等等）

 

@Emit 设置触发回调函数

<script lang="ts">
    import {Vue, Component, Emit} from 'vue-property-decorator';

    @Component
    export default class Test extends Vue{
        mounted(){
            this.$on('gogo', function(n) {//监听回调函数
                console.log(n)
            })
            this.gogo('world');
        }

        @Emit()
        gogo(n: string){
            console.log('hello');
        }
    }
</script>

 

 

 

@Wacth watch监听

<script lang="ts">
    import {Vue, Component, Watch} from 'vue-property-decorator';

    @Component
    export default class Test extends Vue{
       @Watch('gogo')
        onchangeValue(newVal: string, oldVal: string){
            //当gogo发生变化时，触发该函数
        }
        
        @Watch('gogo2', {immediate: true, deep: true})
        onChangeValue(newVal: Person, oldVal: Person){
           //参数immediate是判断是否初始化执行 deep判断是否会递归执行
       }
        
    }
</script>

 

 

 

@Prop 注册父组件传递的参数

<script lang="ts">
    import {Vue, Component, Prop} from 'vue-property-decorator';

    @Component
    export default class Test extends Vue{
        @Prop(Number) propA!: number;//在ts里，?代表可能为undefined，相对的！代表参数不能为空或者undefined
        @Prop({default: 'default value'}) propB!: string;
        @propC([String, Boolean]) propC: string | boolean;
    }
</script>

 

 

 

 

@Model 自定义v-model对应的值

详细查看model

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

@Component
export class myCheck extends Vue{
   @Model ('change', {type: Boolean})  checked!: boolean;
   @Prop({default: 'default value'}) checked:boolean
   change(){
       console.log(6666)
   }
}