vue2项目引入ts实操记录(二)

这次依然说如何修改.vue文件中的脚本代码：

1.先说引用图片问题
比如你的.vue文件或者.ts文件中引入了图片，那么你要进行提前声明，不然ts不认识这个东西。上一篇我已经在src/types下建了一个.d.ts的声明文件，在那个声明文件里面写入下列代码：

declare module "*.png";
declare module "*.jpg";

表示ts能识别.png和.jpg的图片。这样就不会报错了。

2.mixins

构造mixins我是这个思路，先让mixins继承Vue,然后在.vue文件中再继承Mixins,然后把mixins当做参数传进去：
比如我的mixins文件下有一个person-mixins.ts和second-mixins.ts文件

// person-mixins.ts
import { Component, Vue } from 'vue-property-decorator'

@Component
export default class PersonMixins extends Vue {
  public name: string = 'Zhangsan'
  public say (msg: string) {
    console.log(msg)
  }
}

// second-mixins.ts
import { Component, Vue } from 'vue-property-decorator'

@Component
export default class SecondMixin extends Vue {
  public len: number = 1000
  public running () {
    console.log('1000公里')
  }
}

然后在views文件夹下的.vue文件中引入mixins

// test.vue
<script lang='ts'>
import { Component, Mixins, Prop, Watch, Emit } from 'vue-property-decorator'
import PersonMixins from '@/mixins/person-mixins'
import SecondMixin from '@/mixins/second-mixins'
@Component({
  name: 'test'
})
export default class Test extends Mixins(PersonMixins , SecondMixin ) {
	// 这里面就可以使用mixins文件的方法和属性
}

3.Watch监听属性

import { Watch } from 'vue-property-decorator'

@Watch('visible', { immediate: true })
onVisibleChanged (val: boolean, oldVal: boolean) {
    this.dialogVisible = val
}
//onVisibleChanged可以随便取，自己方便就行，就是监听visible这个属性的变化，一旦有变化就会执行onVisibleChanged这个函数。
@Watch('$route', { immediate: true })
private onReouteChange(route: Route) {
    const query = route.query as Dictionary<string>;
    if(query) {
        this.redirect = query.redirect;
        this.otherQuery = this.etOtherQuery(query);
    }
}

4.计算属性

//计算属性属于私有属性 生命周期也应在前面加上private，表示不应该公开给其他组件使用
private get roleInfo(): string {
    return this.title + 'ending'
}

5.过滤器

@Component({
    filters: {
        Test(arg: string) {
            return arg + "存在感"
        }
    }
})

6.@Emit

import { Vue, Component, Emit } from 'vue-property-decorator'

@Component
export default class YourComponent extends Vue {
    count: number = 0
    @Emit()
    addToCount(n:number) {
        this.count += n
    }
    
    @Emit('reset')
    resetCount() {
        this.count = 0
    }
    
    @Emit()
    returnValue() {
        return 10
    }
    
    @Emit()
    onInputChange(e) {
        return e.target.value
    }
    
    @Emit()
    promise() {
        return new Promise((resolve) => {
            setTimeout(() => {
                resolve(20)
            }, 0)
        })
    }
}
// 以上会解析为：
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)
      },
      onInputChange() {
          this.$emit('on-input-change', e.target.value, e)
      },
      promise() {
          const promise = new Promise((resolve) => {
              setTimeout(() => {
                  resolve(20)
              }, 0)
          })
          
          promise.then((value) => {
              this.$emit('promise', value)
          })
      }
  }
}

7.Prop声明

// !: 表示一定存在，?: 表示可能不存在。这两种在语法上叫赋值断言
// @Prop(options: (PropOptions | Constructor[] | Constructor) = {})
// PropOptions,可以使用以下选项：type,default,reqiured,validator
@Prop(Number) readonly propA!: number | undefined
@Prop({ default: 'default value' }) readonly propB!: string
@Prop([String, Boolean]) readonly propC!: string | boolean | undefined
@Prop({ type: String, required: true, default: false }) dialogVisible!: boolean

8. .sync

import { Vue, Component, PropSync } from 'vue-property-decorator'

@Component
export default class YearSun extends Vue {
    @PropSync('name', { type: String }) syncedName!:string
}
// 解析为
export default {
    props: {
        name: {
            type: String
        }
    },
    computed: {
        syncedName: {
            get() {
                return this.name
            },
            set(value) {
                this.$emit('update:name', name)
            }
        }
    }
}

9.ref的引用

// 如果ref在elementUI input上面
import { Form as ElForm, Input } from "element-ui";
(this.$refs.username as Input).focus();
// 如果ref在elementUI form上面
import { Form } from 'element-ui'
(this.$refs[formName] as Form).clearValidate()

如果你是在引入的子组件上面使用的ref，那么写法如下：

import childCom from './chidCom.vue'
(this.$refs.childrencom as childCom).属性或方法 // 这样的写法ts就会去检测childCom的组件中有没有你使用的属性或方法

10.vue + ts父组件调用子组件的方法

// 子组件================
<template>
	<div></div>
</template>
<script lang="ts">
import { Component, Vue, Watch, Prop, Emit } from "vue-property-decorator";
@Component({})
export default class Child extends Vue {
	private flag = false;
	public cutFlag(){
		this.flag = true;
	}
}
</script>
// 父组件====================
<Child ref="child"></Child>
<script lang="ts">
import { Component, Vue, Watch, Prop, Emit } from "vue-property-decorator";
import Child from "./child.vue";
@Component({
	components:{
		Child
	}
})
export default class Parent extends Vue {
	public mounted() {
		(this.$refs["child"] as Child).cutFlag();
	}
}
</script>
// ！！！注意子组件暴露的方法用public方式创建

11.process.env中的变量声明如下：

// types/nodejs.d.ts

declare var process : {
  env: {
    VUE_APP_PUBLIC_PATH: string,
    VUE_APP_PROJECT_NAME: string,
    VUE_APP_VERSION: string,
  }
}