vue3中defineProps和defineEmits的TS使用方法

最新推荐文章于 2024-08-25 10:57:51 发布

farewell--

最新推荐文章于 2024-08-25 10:57:51 发布

阅读量830

点赞数 1

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/m0_72447899/article/details/129313362

版权

该文章介绍了在Vue组件中如何使用Typescript来定义Props接口，确保props的类型安全。它展示了如何为props设置默认值，如`userName`设为默认，以及`sontable`和`success`对象的默认空函数。同时，文章还讨论了子组件如何通过`defineEmits`定义并触发父组件事件，例如名为`info`的事件。

摘要由CSDN通过智能技术生成

//定义接收props的ts接口
interface Props {
  userName: string;
  sontable: object[];
  suceess: {
    num: number;
    meanScore: string;
    washTotTime: string;
    jobNumber: number;
  };
}
//定义props接收props传来的值
const props = withDefaults(defineProps<Props>(), {
  userName: "默认",
  sontable: () => [],
  success: () => {},
});
//子传父事件
const emit = defineEmits<{
  (e: "info", val: any): void;
}>();

**注意** defineProps接收引用类型须是包装一个函数，return出去