Vue fallthrough atributlari
Komponentni prop sifatida e’lon qilinmagan atributlar bilan chaqirish mumkin va ular shunchaki komponentdagi root elementiga tushadi.
Favqulodda atributlar yordamida siz komponent yaratilgan ota-onadan yaxshiroq ko‘rinishga ega bo‘lasiz va u bizning kodimizni soddalashtiradi, chunki atributni prop sifatida e’lon qilishimiz shart emas.
O‘tish uchun ishlatiladigan tipik atributlar class, uslub va v-ondir.
Fallthrough atributlari
Masalan, uslubni komponent ichida yashirgandan ko‘ra, komponent uslubini ota-onadan boshqarish yaxshi bo‘lishi mumkin.
Keling, Vue-da yangi misol, asosiy ishlar ro‘yxatini yarataylik va uslub atributi qilinadigan ishlarni ifodalovchi komponentlarga qanday tushishini ko‘rib chiqaylik.
Shunday qilib, bizning App.vue qilinadigan ishlar ro‘yxati, yangi qilinadigan ishlarni qo‘shish uchun <input> elementi va <button> bo‘lishi kerak. Har bir massiv elementi <todo-item /> komponentidir.
App.vue:
<template>
<h3>Todo List</h3>
<ul>
<todo-item
v-for="x in items"
:key="x"
:item-name="x"
/>
</ul>
<input v-model="newItem">
<button @click="addItem">Add</button>
</template>
<script>
export default {
data() {
return {
newItem: '',
items: ['Buy apples','Make pizza','Mow the lawn']
};
},
methods: {
addItem() {
this.items.push(this.newItem),
this.newItem = '';
}
}
}
</script>
Va TodoItem.vue faqat prop sifatida nima qilish kerakligi tavsifini oladi:
TodoItem.vue:
<template>
<li>{{ itemName }}</li>
</template>
<script>
export default {
props: ['itemName']
}
</script>
Ilovamizni to‘g‘ri yaratish uchun bizga main.js da to‘g‘ri sozlash kerak:
main.js:
import { createApp } from 'vue'
import App from './App.vue'
import TodoItem from './components/TodoItem.vue'
const app = createApp(App)
app.component('todo-item', TodoItem)
app.mount('#app')
Ushbu bo‘limning mohiyatini ko‘rish uchun ushbu xususiyatlar komponentimizning <template> ichidagi root elementiga tushishi mumkin, biz massiv elementlariga App.vue dan ba’zi uslublarni berishimiz mumkin:
Misol
Biz App.vue dan boshlab komponent ichidagi <li> elementlariga uslub beramiz:
<template>
<h3>Todo List</h3>
<ul>
<todo-item
v-for="x in items"
:key="x"
:item-name="x"
style="background-color: lightgreen;"
/>
</ul>
<input v-model="newItem">
<button @click="addItem">Add</button>
</template>
Stil atributi haqiqatdan ham buzilganligini tasdiqlash uchun biz sahifamizdagi <li> elementni o‘ng tugmasini bosishimiz mumkin.
brauzerda ishlar ro‘yxatini tanlang, “Tekshirish” ni tanlang va uslub atributi endi <li> elementida ekanligini ko‘rishimiz mumkin:
"Class" va "uslub" atributlarini birlashtirish
Agar "class" yoki "uslub" atributlari allaqachon o‘rnatilgan bo‘lsa va "class" yoki "uslub" atributlari ham asosiy atributlardan kelib chiqsa, atributlar birlashtiriladi.
Misol
Ota-onadan mavjud uslubga qo‘shimcha ravishda, biz TodoItem.vue komponentidagi <li> elementlariga chekka qo‘shamiz:
<template>
<li style="margin: 5px 0;">{{ itemName }}</li>
</template>
<script>
export default {
props: ['itemName']
}
</script>
Agar brauzerda <li> elementni o‘ng tugmasini bossak, atributlar birlashtirilganligini ko‘rishimiz mumkin. Marja to‘g‘ridan-to‘g‘ri komponent ichidagi <li> elementiga o‘rnatiladi va ota-onadan tushadigan fon rangi bilan birlashtiriladi:
$attrs
Agar komponentning root darajasida bir nechta element mavjud bo‘lsa, atributlar qaysi elementga to‘g‘ri kelishi aniq bo‘lmaydi.
Qaysi root elementi o‘ziga xos atributlarni olishini aniqlash uchun biz elementni o‘rnatilgan $attrs obyekti bilan belgilashimiz mumkin, masalan:
Misol
TodoItem.vue:
<template>
<div class="pinkBall"></div>
<li v-bind="$attrs">{{ itemName }}</li>
<div class="pinkBall"></div>
</template>
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!