vue中props和emit的定义方法总结

Vue 中 defineProps、withDefaults 与 defineEmits 的常见写法速查。

#frame #vue3 #snippet #growing

vue中props和emit的定义方法总结

[!info] related notes

所属 MOC: Vue MOC

概念入口: Vue中的props和emit

Composition API + defineProps

// 基础形式
const props = defineProps<{
  visible: boolean;
  task: TaskInstance;
}>();

// 带默认值
const props = withDefaults(defineProps<{
  visible?: boolean;
  title?: string;
  count?: number;
}>(), {
  visible: false,
  title: '默认标题',
  count: 0
});

// 运行时声明
const props = defineProps({
  visible: Boolean,
  task: Object as PropType<TaskInstance>
});

// 基础形式
const emit = defineEmits(['close', 'save']);

// TypeScript 类型定义
const emit = defineEmits<{
  (e: 'close'): void;
  (e: 'save', data: TaskData): void;
  (e: 'update', id: string, value: any): void;
}>();

// 运行时声明带验证
const emit = defineEmits({
  close: null,
  save: (payload: TaskData) => {
    return payload && typeof payload.id === 'string'
  }
});