一、defineProps
defineProps<{
title:string,
data:number[]
}>()
TS 特有的默认值方式写法
withDefaults是个函数也是无须引入开箱即用接受一个props函数第二个参数是一个对象设置默认值
type Props = {
title?: string,
data?: number[]
}
withDefaults(defineProps<Props>(), {
title: "张三",
data: () => [1, 2, 3]
})
二、defineEmits
// 父组件
<template>
<div>
<Children @myClick="handleClick"></Children>
</div>
</template>
<script setup lang="ts">
import Children from './Children.vue';
const handleClick = (value:number)=> {
console.log(value);
}
</script>
// 子组件
<template>
<div>
<button @click="click123">我传父</button>
</div>
</template>
<script setup lang="ts">
import { defineEmits } from 'vue';
// const emits = defineEmits(["myClick"]) js写法
//ts写法
const emits = defineEmits<{
(e:"myClick", value: number): void
}>()
const click123 = () => {
emits("myClick",88 )
}
</script>
三、ref获取子组件类型写法
<template>
<div>
<Children ref="childrenRef"></Children>
</div>
</template>
<script setup lang="ts">
import Children from './Children.vue';
import { ref } from "vue"
// 重点
const childrenRef = ref<InstanceType<typeof Children> | null>(null)
const handleClick = () => {
console.log(childrenRef.value?.num); //就有ts推断提示了
}
</script>
<style scoped></style>
四、ts定义全局函数和变量app.config.globalProperties
由于Vue3 没有Prototype 属性 使用 app.config.globalProperties 代替 然后去全局定义变量和声明
在main.ts入口文件中
const app = createApp(App)
app.config.globalProperties.$dev = "dev" //这里随便定义个字符串dev
// 声明文件 不然TS无法正确类型 推导
// 声明要扩充@vue/runtime-core包的声明.
// 这里扩充"ComponentCustomProperties"接口, 因为他是vue3中实例的属性的类型.
declare module 'vue' {
export interface ComponentCustomProperties {
$dev: string
}
}
使用说明
<template>
<div class="home">
{{ $dev }} //模版上直接使用即可
</div>
</template>
<!-- script标签里使用 -->
<script setup lang="ts">
import { onMounted,getCurrentInstance, ComponentInternalInstance } from "vue"
const {proxy} = getCurrentInstance() as ComponentInternalInstance
onMounted(() => {
console.log(proxy!.$dev);
})
</script>