Vue.js 사용자 지정 이벤트의 이름

Vue.js 사용자 지정 이벤트의 이름

나는, 서로 포함한 두 요소를 갖는다.

내가 아이에서 이벤트의 시발점이 그리고 나는 부모님에 그것을 받지 않겠어요.

어린이들의 구성 요소

this.$emit('myCustomEvent', this.data);

부모님 구성 요소

<parent-component v-on:myCustomEvent="doSomething"></parent-component>

내가 my-custom-event에 그 두곳에서 행사 이름을 바꿨다 하지만 그것은 동작한다.

뷰 어떻게든 행사 이름transform?아니면, 어떤 문제가 될 수 있니?나는 구성 요소 명명 규칙을 생각하지만 아무것도 없행사 이름과 관련된docs을 읽었다.

커스텀 이벤트의 명명에는 항상 를 사용하는 것이 좋습니다.@KoriJohnRoys가 추천한 소문자 이벤트도 모두 박살났지만 읽기 어렵습니다.사용을 권장하지 않습니다.camelCase행사 이름.

뷰의 공식 문서.JS이벤트 이름의 주제에 다음이라고 말한다.

이벤트 이름들

컴포넌트나 소품과는 달리 이벤트명은 대소문자를 자동으로 변환하지 않습니다.대신, 내보낸 이벤트의 이름은 해당 이벤트를 듣기 위해 사용된 이름과 정확히 일치해야 합니다.예를 들어 camelCased 이벤트 이름을 내보내는 경우:

this.$emit('myEvent')

Kebab-cathed 버전을 들어도 아무런 효과가 없습니다.

<my-component v-on:my-event="doSomething"></my-component>

컴포넌트나 소품과는 달리 이벤트명은 JavaScript에서 변수나 속성명으로 사용되지 않으므로 camelCase나 PascalCase를 사용할 필요가 없습니다.또한 HTML의 대소문자를 구분하지 않기 때문에 DOM 템플릿 내의 v-on 이벤트 수신자는 자동으로 소문자로 변환되므로 v-on:myEvent가 v-on:myevent가 되어 myEvent를 청취할 수 없습니다.

따라서 이벤트 이름에는 항상 kebab-case를 사용할 것을 권장합니다.

@ssc-hrep3의 포인트 외에kebab-case

.sync용 문서에서는 다음 패턴을 사용할 것을 권장합니다.update:myPropName

커스텀 이벤트의 경우 가장 안전한 옵션은 소문자로 구분된 이벤트 이름을 모두 함께 사용하는 것입니다.현재는 케밥 케이스도 문제가 될 수 있다.

this.$emit('mycustomevent', this.data);

그런 다음 부모 컴포넌트에서 캐멀 케이싱 함수에 자유롭게 바인딩할 수 있습니다.

<parent-component v-on:mycustomevent="doSomething"></parent-component>

좀 이상하긴 하지만 효과가 있어요

소스(kebab-case도 작동하지 않는 상태)

Vue.js는 xml 태그(컴포넌트 이름)뿐만 아니라 속성도 변환하므로 이벤트를 생성할 때

$emit('iLikeThis')

다음과 같이 처리해야 합니다.

v-on:i-like-this="doSomething"

문서로부터:

컴포넌트(또는 소품)를 등록할 때는 케밥케이스, 카멜케이스 또는 타이틀케이스를 사용할 수 있습니다.

단, HTML 템플릿에서는 다음과 같은 kebab-case를 사용해야 합니다.

언급URL : https://stackoverflow.com/questions/42441952/vue-js-custom-event-naming