Vue 구성 요소 이름은 소문자여야 합니까?
뷰 파일의 컴포넌트를 사용하려고 합니다.다음을 사용하여 내 뷰에 컴포넌트를 마운트하려고 하면 작동하지 않습니다.<CampaignCreate></CampaignCreate>
const app = new Vue({
el: '#rewards-app',
components: {
CampaignCreate,
}
});
다음으로 변경할 경우:
const app = new Vue({
el: '#rewards-app',
components: {
'campaign-create': CampaignCreate,
}
});
뷰 파일에 컴포넌트를 마운트할 수 있습니다.<campaign-create></campaign-create>
문제없이.저는 그 이면에 있는 이유를 이해하려고 합니다.현재 vuejs 2.x를 사용하고 있습니다.
한마디로 HTML은 대소문자를 구분하지 않기 때문입니다.2년 전 Evan You 자신이 개설한 VueJS Tracker에는 다음과 같은 이유로 큰 논의가 있었습니다.
아시다시피 HTML은 대소문자를 구분하지 않습니다.
myProp="123"
로 해석되다myprop="123"
이로 인해 Vue.js의 경고에 의해,my-prop="123"
JavaScript에서 선언된 프로펠을 다음과 같이 지칭하다myProp
이것은 초보자를 자주 문다.
그 문제는 결국 같은 방침을 유지하기로 결정하면서 종결되었다.여기 중요한 인용구가 있습니다.
기본적으로, js와 html은 다른 기술이고 다른 명명 체계를 사용하기 때문에 문제가 존재합니다.그리고 두 테크놀로지 모두에서 같은 케이스(케밥 또는 카멜)를 사용하면 이상한 점이 한 곳에서 다른 곳으로 이동하지만 근본적인 문제는 지속될 것이기 때문에 선을 긋는 것이 최선이라고 생각합니다.현재 행은 html 컨텍스트의 kebab 대소문자와 js 컨텍스트의 camel Case(및 Pascal Case)가 매우 좋습니다.
언급URL : https://stackoverflow.com/questions/52085622/vue-component-name-must-be-lowercase
'programing' 카테고리의 다른 글
상위 페이지에 속하는 Nuxtjs 페이지 구성 요소에 정의되지 않은 변수입니다. (0) | 2022.08.15 |
---|---|
콘솔 주의: v-for로 렌더링된 구성 요소 목록에 명시적 키가 있어야 함 (0) | 2022.08.15 |
java.displaces를 클릭합니다.Out Of Memory Error: GC 오버헤드 제한을 초과했습니다. (0) | 2022.08.15 |
Java에서 클래스를 사용하는 방법 (0) | 2022.08.15 |
저장소에서 값을 변경한 후 컴포넌트의 함수를 호출하는 방법은 무엇입니까? (0) | 2022.08.15 |