Vue中使用TypeScript

vue-property-decorator组件的使用

​ Tip: 这篇文章是我用到了typescript后写的，因为刚接触没多久，写得不好多多海涵，栗子用了另外一位作者的，在此表示感谢，vue3.x开始会慢慢向typescript靠拢，所以学习ts是非常有必要的，阅读本文需要具备一定的TypeScript基础和vue基础。

当我们在vue单文件中使用TypeScript时,引入vue-property-decorator之后,script中的标签就变为这样:

等同于：

把我们需要用到的属性给导入进来，在这里我导入了Component；这是vue-property-decorator组件提供的属性，至于有哪些属性下面我会说到。

相信很多小伙伴也注意到我使用了和以往不同的写法，使用了es6的类的写法，至于为何可以使用这种写法就是因为这个组件是完全依赖于vue-class-component；这是尤大神写的支持vue的组件，具体可看。建议先看看~

Tip:(很重要的一点)：在类中声明的变量其实和data中声明的是一样的，都是有双向绑定的；也就是例子中的ValA和ValB有了类型指定同时能双向绑定

vue-property-decorator组件的属性

这个组件完全依赖于vue-class-component.它具备以下几个属性:

• @Component (完全继承于vue-class-component)

• @Emit

• @Inject

• @Provice

• @Prop

• @Watch

• @Model

• Mixins (在vue-class-component中定义);

1. @Component

   是 vue-class-component 中的装饰器修饰组件，用来为组件类添加各种“装饰属性”

   简单的说，就是框架负责为类额外添加一些成员和功能，而开发者负责通过 注解 的方式 将数据传给框架，框架收到 注解 传入的数据后，可以用在类上。

   我们可以看到@component中传的是一个对象，对象中可以有多个属性，这里写入了 components属性；这个属性是被注入到了Vue框架中，然后通过类继承的方式把Vue中的值给到App类，从而App就有了装饰器里的属性，同样的这样的好处是Vue有了这些属性后以后的类只要继承了Vue就有了对应的属性。

   当然@component的声明还能是表示在文件中使用组件，所以一般都会声明

2. @Emit

   主要用于事件监听与触发，熟悉Vue的小伙伴都知道Vue提供了两个函数on。主要用于兄弟组件的传值，通过借助中间组件eventbus的方式，在要监听事件的组件中写emit，就可以实现兄弟（非父子）组件之间的值传递。

   但在这个组件中，为ts提供了更加方便的用法。也就是使用@emit装饰器

   上面的代码写成vue用的es6语法就是：

   通过对比我们会发现@Emit()其实就是把$emit给写入它装饰的类中，这样就省去了对事件的触发操作。

   当然如果你想触发特定的事件不想触发这个它装饰的事件的话，只要在@Emit()中传入要触发的事件即可请看下面例子

3. @Watch

   顾名思义，就是监听，只不过监听的是页面数据的变化比如说当值发生改变的时候触发的函数

   我们可以利用vue-property-decorator提供的@Watch装饰器来替换Vue中的watch属性,以此来监听值的变化。请看下面例子：

   转成Es6的vue格式如下

   export default{
       watch: {
           'child': this.onChangeValue,/*child的一旦发生改变就会触发*/
           'person': {
               handler: 'onChangeValue',
               immediate: true,
               deep: true
           }
       },
       methods: {
           onChangeValue(newVal, oldVal){
               // todo...
           }
       }
   }
   

   @watch()有两参数，第一个参数是监听的值，第二个参数是所装饰的函数即监听到属性变化之后的操作.比如deep：true就是表示深度监听。

   注意用@watch只会监听到它下面的一个方法，如果有多个监听要写多个Watch。

4. @Prop

   我们在使用Vue时有时会遇到子组件接收父组件传递来的参数.我们需要定义Prop属性。

   比如下面例子：

   export default {
     props: {
       propA: {
         type: Number
       },
       propB: {
         default: 'default value'
       },
       propC: {
         type: [String, Boolean]
       },
     }
   }
   

   利用@prop装饰器的方法改造如下：

   @Prop接受一个参数可以是类型变量或者对象或者数组.@Prop接受的类型比如Number是JavaScript的类型,之后定义的属性类型则是TypeScript的类型.

5. @Model

   Vue组件提供model: {prop?: string, event?: string}让我们可以定制prop和event.
   默认情况下，一个组件上的v-model 会把 value用作 prop且把 input用作 event，说白了就是对input的value进行属性绑定，对input绑定了方法；但是一些输入类型比如单选框和复选框按钮可能想使用 value prop来达到不同的目的。使用model选项可以回避这些情况产生的冲突。

   给出官网例子

   Vue.component('my-checkbox', {
     model: {
       prop: 'checked',
       event: 'change'
     },
     props: {
       // this allows using the `value` prop for a different purpose
       value: String,
       // use `checked` as the prop which take the place of `value`
       checked: {
         type: Number,
         default: 0
       }
     },
     // ...
   })
   

   上述代码相当于：

   那么使用使用vue-property-decorator提供的@Model改造上面的例子

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

   @Model()接收两个参数, 第一个是event值, 第二个是prop的类型说明, 与@Prop类似, 这里的类型要用JS的. 后面在接着是prop和在TS下的类型说明.

6. Mixins

   混合模式；混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

因为我个人也刚学ts没多久，写得不好，还请多多海涵。后续会继续更新。