这次依然说如何修改.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,
}
}