Vue3的defineEmits、defineProps结合TS

3,629 阅读1分钟

废话不多说,直接进入操作环节

defineEmits

<div  @click="handleItemClick(item)">...</div>

// 1.定义暴露出去的方法
const emits = defineEmits<{
  (e: 'itemClick', item: ICategorys): void
}>()

// 2.handleItemClick方法触发时通过emits把itemClick暴露出去
function handleItemClick(item: ICategorys) {
  emits('itemClick', item)
}

defineProps与withDefaults

<div class="category-item" 
    v-for="(item, index) in categorys" 
    :key="item.id" 
    @click="handleItemClick(item)">
</div>

import { ICategorys } from '@/store/home';

// 1.定义props类型
export interface IProps {
  categorys?: ICategorys[],
}

// 2.定义默认值
const props = withDefaults(defineProps<IProps>(), {
  categorys: () => []
})