vue3 +ts 集合api使用 setup resf com
2021-07-19 本文已影响0人
小李不小
<template>
<div class="home">
{{inf}}
<button @click="getname('灰太狼')">点击变换形态</button>
<div>vue3+ts {{com}}</div>
</div>
</template>
<script lang="ts">
import { defineComponent,reactive,toRefs,ref,computed} from 'vue';
interface user{
inf:string;
arr:[];
getname(agr:string):void;//传入一个字符 返回类型任意
getactive():string; //定义一个方法,必须返回字符串
}
export default defineComponent({
setup(props) {
//进行校验,方法和类型全部对应起来,不然会报错
const user:user = reactive({
inf:'喜洋洋',
arr:[],
getname(agr:string){
this.inf=agr;
},
getactive(){
return '123'
}
})
//三张类型的写法
// const user:user = reactive({})
// const user = reactive<user>({})
// const user = reactive({}) as user
//ref的定义 使用泛型
let conu=ref<number| string>("20")
//计算属性
let com=computed<number>(()=>{
return 1+2;
})
//必须返回
return {
...toRefs(user),
conu,
com
}
}
});
</script>