Компонентыг бүртгүүлэх хичээлд компонентийн нэрийг 'my-counter' гэж мөр төрлөөр бичин өгсөн. Энэ нь зарим тохиолдолд асуудал үүсгэдэг. Жишээ нь та төсlлийн кодыг бичиж буй засварлагчид кодыг цэвэр байлгах ямар нэгэн хэрэгсэл /linter/ ашиглаж байвал нэрэнд хашилтыг хэрэглэвэл төслийн хэвээс хасагддаг тул үүнийг ашиглахгүй байх нь дээр. Иймээс VueJs -д компонентийн нэрийг үүсгэх өөр аргачлал байдаг. Компонентийн нэрийг өгөхдөө
new Vue({
el: '#app',
components: {
'my-counter': component
}
});хашилтанд my-counter гэж html кодод ашиглах тегийн нэрийг өгсөн байгаа.
VueJs -д html кодод ашиглах тегийн нэрийг арай өөрөөр үүсгэх арга байдгийг Компонентыг бүртгүүлэх хичээлийн жишээний div id="app1" элементэд Vue програмын инициализац хийхдээ my-counter компонентийг
<body>
<div id="app">
<my-counter v-for="c in 2"></my-counter>
</div>
<hr>
<div id="app1">
<my-counter></my-counter>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var component = {
template: `
<div style="border: 1px solid green; padding: 10px">
<h2>Тоолуур: {{ counter }}</h2>
<button @click="add">Тоолуурыг нэмэх</button>
</div>
`,
data: function() {
return {
counter: 0
}
},
methods: {
add: function() {
this.counter++
}
}
}
new Vue({
el: '#app',
components: {
'my-counter': component
}
});
new Vue({
el: '#app1',
components: {
myCounter: component
}
})
</script>
</body>бүртгүүлсэн жишээнээс харцгаая. app1 айдитай div -д Vue -гийн хувийн инициализац хийхдээ түүний тохиргооны обьектын components талбарт компонентийг бүртгүүлсэн. Гэхдээ энд компонентийн нэрийг хашилтанд мөр хэлбэрээр биш myCounter гэж тэмээ /camelCase/ хэвийг ашиглан бичсэн. Үүнийг Vue фреймворк my-counter тегийн нэртэй ижилхэн болгон хөрвүүлнэ. Иймээс html кодод тегийг <my-counter></my-counter> гэж бичсэнг өөрчлөхгүйгээр ашиглана. Хуудсыг хөтөч дээр нээвэл
консолд алдаа заахгүйгээр гурван тоолуурыг үзүүлэн бүгд хэвийн ажиллана. Иймээс цаашид тегийн нэрийг кодод мөр хэлбэрээр биш camelCase хэвийг ашиглан бичиж сурахыг зөвлөе.
илэрхийллийг хялбарчил.