Vue lokal komponentlar
Biz hozirgacha komponentlarni kiritganimiz ularni loyihadagi barcha *.vue fayllaridan foydalanish imkonini beradi.
Komponentlar mahalliy bo‘lishi mumkin, ya’ni ularga faqat ma’lum bir *.vue fayli ichida kirish mumkin.
Global komponentlar
Biz komponentlarni main.js ichiga kiritganimiz shu paytgacha ushbu loyihadagi boshqa barcha *.vue fayllarning <template> ichidagi komponentlarga kirish imkoniyatini beradi.
Misol
Biz CompOne.vue komponentidan CompTwo.vue va App.vue ichidagi komponentlardan joriy main.js sozlamalarimiz bilan bir-biriga kirish mumkinligini ko‘rsatish uchun foydalanamiz.
main.js:
import { createApp } from 'vue'
import App from './App.vue'
import CompOne from './components/CompOne.vue'
import CompTwo from './components/CompTwo.vue'
const app = createApp(App)
app.component('comp-one', CompOne)
app.component('comp-two', CompTwo)
app.mount('#app')
Mahalliy komponentlar
Biz komponentni <script> tegiga to‘g‘ridan-to‘g‘ri main.js ichiga qo‘shish o‘rniga *.vue faylga kiritishimiz mumkin.
Agar komponentni to‘g‘ridan-to‘g‘ri *.vue fayliga qo‘shsak, komponent faqat shu faylda mahalliy sifatida foydalanish mumkin bo‘ladi.
Misol
CompOne.vue-ni App.vue-ga mahalliy qilish va faqat u erdan foydalanish uchun uni main.js-dan olib tashlaymiz.
main.js:
import { createApp } from 'vue'
import App from './App.vue'
import CompOne from './components/CompOne.vue'
import CompTwo from './components/CompTwo.vue'
const app = createApp(App)
app.component('comp-one', CompOne)
app.component('comp-two', CompTwo)
app.mount('#app')
Va o‘rniga CompOne.vue to‘g‘ridan-to‘g‘ri App.vue ning <script> tegiga kiriting.
App.vue:
<template>
<h3>Local Component</h3>
<p>The CompOne.vue component is a local component and can only be used inside App.vue.</p>
<comp-one />
<comp-two />
</template>
<script>
import CompOne from './components/CompOne.vue';
export default {
components: {
'comp-one': CompOne
}
}
</script>
CompOne.vue komponenti endi faqat App.vue da mavjud.
Agar siz dasturni ishlab natija rejimida ishga tushirsangiz va CompTwo.vue ichidan CompOne.vue dan foydalanishga harakat qilsangiz, siz ogohlantirish olasiz:
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!