vue3에서 소품과 방출을 사용하고 해당 유형과 기본값을 지정하는 방법

defineProps 사용

defineProps은 사용할 때 도입할 필요가 없습니다. 기본값은 전역 메서드입니다. defineProps在使用的时候无需引入，默认是全局方法。

• 在 js 开发的 vue3 项目中使用

const props = defineProps({
  attr1: {
    type: String, // S 必须大写
    default: "",
  },
  attr2: Boolean,
  attr3: {
    type: Number,
    required: true,
  },
});

js 环境中使用与 vue2 的使用方法类似，只是选项式 API 换成了组合式 API。定义 props 类型与默认值都与 vue2 类型，vue3 中使用的是definePropsAPI，在此不多介绍。

• 在 ts 开发的 vue3 项目中使用

interface DeatilInf {
  aaa: string;
  bbb: number;
}

const props = withDefaults(
  // 参数一：定义props类型：? 代表非必传字段， :号后面紧跟的是数据类型或自定义接口， | 或多种类型
  defineProps<{
    name: string;
    age?: number;
    detail?: DeatilInf | any;
  }>(),
  // 参数二：指定非必传字段的默认值
  {
    age: 18,
    detail: {},
  }
);

使用 typeScript 开发 vue3 项目定义 props 主要使用的 API 有两个： defineProps 定义接收的 props 、withDefaults 定义接收的类型。

当然，你可以使用与 JavaScript 环境相同的方式来定义 props，但这种做法会削弱使用 TypeScript 的意义。

defineEmits 的使用

与 vue2 不同：vue3 在触发事件之前需要定义事件。在Vue3中，`defineEmits`同样是一个全局API

• js 中使用

const emits = defineEmits(["change", "input"]);
emits("chage", "data");
emits("input", { data: 123 });

• TS 中使用

enum EventName {
  CHANGE = "change",
  INPUT = "input",
}

const emits = defineEmits<{
  (event: EventName.CHANGE, data: string[]): void;
  (event: EventName.INPUT, data: string): void;
}>();

emits(EventName.CHANGE, ["data"]);
emits(EventName.INPUT, "123");

上面的代码中使用了枚举 enum

• js가 개발한 vue3 프로젝트에 사용

rrreeejs 환경에서 사용하는 것은 vue2와 유사하지만 옵션이 있습니다. API에는 통합 API로 대체되었습니다. 정의된 props 유형과 기본값은 vue2 유형과 동일합니다. Vue3에서는 여기서 소개하지 않을 defineProps API를 사용합니다. 🎜

• 🎜 ts🎜

rrreee🎜에서 개발한 vue3 프로젝트에서 사용됩니다. typeScript를 사용하여 vue3 프로젝트를 개발하면 props를 정의할 수 있습니다. 사용되는 주요 API: defineProps는 수신된 props를 정의하고, withDefaults는 수신된 유형을 정의합니다. 🎜🎜물론 JavaScript 환경과 동일한 방식으로 props를 정의할 수 있지만 그렇게 하면 TypeScript를 사용하는 목적이 무산됩니다. 🎜🎜defineEmits 🎜🎜 사용은 vue2와 다릅니다. vue3은 이벤트를 트리거하기 전에 이벤트를 정의해야 합니다. Vue3에서 `defineEmits`는 전역 API이기도 합니다🎜

• 🎜js에서 사용됨🎜

rrreee

• 🎜 TS에서 🎜

rrreee🎜를 사용하세요. 위 코드는 "마법의 문자열"이 나타나는 것을 피하기 위해 enum 열거형을 사용합니다. js는 ts에서도 사용될 수 있으므로 그 역할을 수행하지 않을 것이라는 점을 언급할 가치가 있습니다. 🎜🎜특히 대규모 프로젝트에서는 데이터 유형을 트리거할 때 예상치 못한 오류가 발생할 수 있으므로 오류를 찾는 데 몇 시간이 걸릴 수 있습니다. 매직 스트링이 잘못 작성되어 예상되는 이벤트 트리거 효과를 얻지 못할 수 있습니다. 🎜

위 내용은 vue3에서 소품과 방출을 사용하고 해당 유형과 기본값을 지정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!