定义对象:
//设置范型
interface Istate {
name: string,
age: number,
[key: string]: any;
}
const myName: Istate = reactive({
name: '张三',
age: 18,
address: '北京',
sex: '男'
})
ref
<template>
<div ref="mydiv">my name div</div>
</template>
//DOM对象
const mydiv = ref<HTMLDivElement>()
//基本数据类型
const text =ref<string>("你好")
props
<script lang="ts" setup>
interface Iprops {
name: string,
age: Number,
}
const props = defineProps<{
title:string,
obj: Iprops
}>()
//可选传参
const props = defineProps<{
title:string,
//表示可选
obj?: Iprops
}>()
</script>
emit
//父组件
<child @event=handleEvent></child>
const handleEvent=(value:string)=>{
console.log(value)
}
//子组件
const emit = defineEmits<{ (e: 'event', value: string): void }>()
//自定义点击方法
const clickHandle = () => {
emit("event", '123')
}