vue使用typescript的一些笔记

主要差异是在script里

<script lang="ts">
    import {Vue, Component,Prop,Emit,Watch,Modal...} from 'vue-property-decorator'; //按需引入所需的

    @Component({})
    export default class "组件名" extends Vue{
       
    }
</script>

data

原本data的定义改成直接在class里定义参数，可以限制类型，添加修饰符

 export default class "组件名" extends Vue{
       private xxx=''   //直接赋值相当于默认给了响应的类型
        private:String;  //也可以只定义不赋值
    }

相当于原来的

   export default {
        data(){
            return {
                ValA: '',
            }
        }
    }

@Component 

@Component(
    name:''  //当前的组件名
{
    components:{
        //组件注册
}
    //过滤器
 filters: {
    stateFilter: (lll) => {
      return xxx;
    }
  }
})    

 

@Prop

//父组件

<Child :value='fatherValue' :data='fatherObj'></Child>

//子组件
  @Component({})
    export default class "组件名" extends Vue{
       @Prop() value!: number;
       @Prop({
        type: Object,
    　　required: false,
     　default: () => ({})     //这可以设置一个默认值
  })
  data!: {};
    }

@Emit

count = 0
 
  @Emit()
  addToCount(n: number) {   //父组件监听事件的名字就叫addToCount
    this.count += n
  }
 
  @Emit('reset')     //父组件监听事件的名字就叫reset
  resetCount() {
    this.count = 0
  }

//父组件监听方式还是和以前的一样

@Watch

@Watch('child')
onChangeValue(newVal: string, oldVal: string){
    // todo...
}

@Watch('person', {immediate: true, deep: true})
onChangeValue(newVal: Person, oldVal: Person){
    // todo...
}

 @Watch('person')

  onPersonChanged2(val: Person, oldVal: Person) {}

相当于之前的

export default {
  watch: {
    child: [
      {
        handler: 'onChildChanged',
        immediate: false,
        deep: false,
      },
    ],
    person: [
      {
        handler: 'onPersonChanged1',
        immediate: true,
        deep: true,
      },
      {
        handler: 'onPersonChanged2',
        immediate: false,
        deep: false,
      },
    ],
  },
  methods: {
    onChildChanged(val, oldVal) {},
    onPersonChanged1(val, oldVal) {},
    onPersonChanged2(val, oldVal) {},
  },
}

@Model   类似实现一个双向绑定的功能

// 父组件

 <Child v-model="foo"></Child >


//子组件
<input type="checkbox" v-bind:checked="checked" 
v-on:change="$emit('handle', $event.target.checked)" >

export default class ModelComponent extends Vue {
      @Model('handle', { type: Boolean }) private checked!: boolean;
    }

@Provide   @Inject 

// 父组件

export default class Home extends Vue {
      @Provide('bar') private foo = '111';
    }

// 子组件

@Component
export default class ProvideInject extends Vue {
  @Inject() private readonly bar!: string;     //bar 要对应父组件的Provide
}

计算属性

   export default class "组件名" extends Vue{
       private val=1
        get Val(){
            return 1;
        }
    }

相当于

  export default {
        computed: {
            Val: function() {
                return 1;
            }
        }
    }

 

待补充。。。