programing

Vue 구성 요소 이름은 소문자여야 합니까?

luckcodes 2022. 8. 15. 11:07

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