← Back to rules

vue/valid-define-emits 정확성

An auto-fix is available for this rule.

동작 방식

이 규칙은 defineEmits 컴파일러 매크로가 유효한지 확인합니다.

다음 경우에 대해 defineEmits 컴파일러 매크로를 보고합니다:

• defineEmits가 지역적으로 선언된 변수를 참조하고 있음.
• defineEmits가 리터럴 타입과 인수를 동시에 포함함. 예: defineEmits<(e: 'foo')=>void>(['bar'])
• defineEmits가 여러 번 호출됨.
• 사용자 정의 이벤트가 defineEmits와 export default {} 모두에서 정의됨.
• 사용자 정의 이벤트가 defineEmits 또는 export default {} 어느 쪽에서도 정의되지 않음.

왜 문제가 되는가?

defineEmits를 잘못 사용하면 런타임 오류, 불명확한 컴포넌트 계약, 타입 안전성이 상실될 수 있습니다.
Vue는 코드를 여전히 컴파일할 수 있지만, 발행되는 이벤트는 조용히 작동하지 않거나 올바르게 타입 지정되지 않을 수 있습니다.

예시

이 규칙에 잘못된 코드 예시:

<script setup>
const def = { notify: null };
defineEmits(def);
</script>

<script setup lang="ts">
defineEmits<(e: "notify") => void>({ submit: null });
</script>

<script setup>
defineEmits({ notify: null });
defineEmits({ submit: null });
</script>

<script>
export default {
  emits: ["notify"],
};
</script>
<script setup>
defineEmits({ submit: null });
</script>

이 규칙에 올바른 코드 예시:

<script setup>
defineEmits({ notify: null });
</script>

<script setup>
defineEmits(["notify"]);
</script>

<script setup lang="ts">
defineEmits<(e: "notify") => void>();
</script>

<script>
export default {
  emits: ["notify"],
};
</script>
<script setup>
defineEmits();
</script>

사용 방법

이 규칙을 구성 파일이나 명령줄 인터페이스를 통해 활성화하려면 다음을 사용할 수 있습니다:

구성 파일 (.oxlintrc.json)

{
  "plugins": ["vue"],
  "rules": {
    "vue/valid-define-emits": "error"
  }
}

CLI

oxlint --deny vue/valid-define-emits --vue-plugin

참고 자료

• 규칙 소스