ફોલથ્રુ એટ્રિબ્યુટ્સ (Fallthrough Attributes) ​

આ પેજ ધારે છે કે તમે પહેલાથી જ કમ્પોનન્ટ્સના મૂળભૂત પાસાઓ વાંચી લીધું છે. જો તમે કમ્પોનન્ટ્સ માટે નવા હોવ તો પહેલા તે વાંચો.

એટ્રિબ્યુટ ઇનહેરિટન્સ (Attribute Inheritance) ​

"ફોલથ્રુ એટ્રિબ્યુટ" એ એક એટ્રિબ્યુટ અથવા v-on ઇવેન્ટ લિસનર છે જે ઘટકને પાસ કરવામાં આવે છે, પરંતુ તે મેળવનાર ઘટકના પ્રોપ્સ અથવા એમિટ્સ માં સ્પષ્ટપણે જાહેર કરવામાં આવતું નથી. આના સામાન્ય ઉદાહરણોમાં class, style અને id એટ્રિબ્યુટ્સનો સમાવેશ થાય છે.

જ્યારે કમ્પોનન્ટ સિંગલ રૂટ એલિમેન્ટ (root element) રેન્ડર કરે છે, ત્યારે ફોલથ્રુ એટ્રિબ્યુટ્સ રૂટ એલિમેન્ટના એટ્રિબ્યુટ્સમાં આપમેળે ઉમેરવામાં આવશે. ઉદાહરણ તરીકે, નીચેના ટેમ્પલેટ સાથે <MyButton> કમ્પોનન્ટ આપેલ છે:

<!-- <MyButton> નું ટેમ્પલેટ -->
<button>મને ક્લિક કરો</button>

અને આ કમ્પોનન્ટનો ઉપયોગ કરતા પેરેન્ટ છે:

<MyButton class="large" />

અંતિમ રેન્ડર કરાયેલ DOM આ પ્રમાણે હશે:

<button class="large">મને ક્લિક કરો</button>

અહીં, <MyButton> એ સ્વીકૃત પ્રોપ તરીકે class જાહેર કર્યું નથી. તેથી, class ને ફોલથ્રુ એટ્રિબ્યુટ તરીકે ગણવામાં આવે છે અને આપમેળે <MyButton> ના રૂટ એલિમેન્ટમાં ઉમેરવામાં આવે છે.

class અને style મર્જિંગ (Merging) ​

જો ચાઇલ્ડ કમ્પોનન્ટના રૂટ એલિમેન્ટમાં પહેલેથી જ class અથવા style એટ્રિબ્યુટ્સ હોય, તો તે class અને style વેલ્યુસ સાથે મર્જ કરવામાં આવશે જે પેરેન્ટ પાસેથી વારસામાં (inherited) મળે છે. માની લો કે આપણે અગાઉના ઉદાહરણમાં <MyButton> ના ટેમ્પલેટને આ પ્રમાણે બદલીએ છીએ:

<!-- <MyButton> નું ટેમ્પલેટ -->
<button class="btn">મને ક્લિક કરો</button>

પછી અંતિમ રેન્ડર કરાયેલ DOM હવે આ બનશે:

<button class="btn large">મને ક્લિક કરો</button>

v-on લિસનર ઇનહેરિટન્સ ​

આ જ નિયમ v-on ઇવેન્ટ લિસનર્સને લાગુ પડે છે:

<MyButton @click="onClick" />

click લિસનર <MyButton> ના રૂટ એલિમેન્ટમાં ઉમેરવામાં આવશે, એટલે કે નેટિવ <button> એલિમેન્ટ. જ્યારે નેટિવ <button> પર ક્લિક કરવામાં આવે છે, ત્યારે તે પેરેન્ટ કમ્પોનન્ટની onClick મેથડને ટ્રિગર કરશે. જો નેટિવ <button> પાસે પહેલેથી જ v-on સાથે જોડાયેલ click લિસનર હોય, તો બંને લિસનર ટ્રિગર થશે.

નેસ્ટેડ કમ્પોનન્ટ ઇનહેરિટન્સ ​

જો કમ્પોનન્ટ તેના રૂટ નોડ તરીકે બીજા કમ્પોનન્ટને રેન્ડર કરે છે, ઉદાહરણ તરીકે, અમે તેના રૂટ તરીકે <BaseButton> રેન્ડર કરવા માટે <MyButton> ને રિફેક્ટર કર્યું છે:

<!-- <MyButton/> નું ટેમ્પલેટ જે બીજા ઘટકને રેન્ડર કરે છે -->
<BaseButton />

પછી <MyButton> દ્વારા પ્રાપ્ત ફોલથ્રુ એટ્રિબ્યુટ્સ આપમેળે <BaseButton> ને ફોરવર્ડ કરવામાં આવશે.

નોંધ કરો કે:

૧. ફોરવર્ડ કરાયેલા એટ્રિબ્યુટ્સમાં એવા કોઈ પણ એટ્રિબ્યુટ્સનો સમાવેશ થતો નથી જે પ્રોપ્સ તરીકે જાહેર કરવામાં આવ્યા હોય, અથવા <MyButton> દ્વારા જાહેર કરાયેલી ઇવેન્ટ્સના v-on લિસનર્સ હોય - બીજા શબ્દોમાં કહીએ તો, જાહેર કરેલા પ્રોપ્સ અને લિસનર્સ <MyButton> દ્વારા "વપરાઈ" ગયા છે.

૨. ફોરવર્ડ કરાયેલા એટ્રિબ્યુટ્સ જો <BaseButton> દ્વારા જાહેર કરવામાં આવ્યા હોય તો તે પ્રોપ્સ તરીકે સ્વીકારવામાં આવી શકે છે.

એટ્રિબ્યુટ ઇનહેરિટન્સ અક્ષમ કરવું ​

જો તમે નથી માંગતા કે કમ્પોનન્ટ આપમેળે એટ્રિબ્યુટ્સ મેળવે, તો તમે કમ્પોનન્ટના ઓપ્શન્સ માં inheritAttrs: false સેટ કરી શકો છો.

<script setup>
defineOptions({
  inheritAttrs: false
})
// ...setup લોજિક
</script>

એટ્રિબ્યુટ ઇનહેરિટન્સ ને અક્ષમ કરવા માટેનું સામાન્ય કારણ ત્યારે હોય છે જ્યારે એટ્રિબ્યુટ્સને રૂટ નોડ સિવાયના અન્ય એલિમેન્ટ્સ પર લાગુ કરવાની જરૂર હોય. inheritAttrs ઓપ્શનને false પર સેટ કરીને, તમે ફોલથ્રુ એટ્રિબ્યુટ્સ ક્યાં લાગુ કરવા જોઈએ તેના પર સંપૂર્ણ નિયંત્રણ લઈ શકો છો.

આ ફોલથ્રુ એટ્રિબ્યુટ્સને ટેમ્પલેટ એક્સપ્રેશન્સમાં સીધા જ $attrs તરીકે એક્સેસ કરી શકાય છે:

<span>ફોલથ્રુ એટ્રિબ્યુટ્સ: {{ $attrs }}</span>

$attrs ઓબ્જેક્ટમાં એવા તમામ એટ્રિબ્યુટ્સનો સમાવેશ થાય છે જે ઘટકના props અથવા emits ઓપ્શન્સ (દા.ત., class, style, v-on લિસનર્સ, વગેરે) દ્વારા જાહેર કરવામાં આવતા નથી.

કેટલીક નોંધો:

• પ્રોપ્સથી વિપરીત, ફોલથ્રુ એટ્રિબ્યુટ્સ જાવાસ્ક્રિપ્ટમાં તેમનું અસલ કેસિંગ જાળવી રાખે છે, તેથી foo-bar જેવા એટ્રિબ્યુટને $attrs['foo-bar'] તરીકે એક્સેસ કરવાની જરૂર છે.

• @click જેવા v-on ઇવેન્ટ લિસનરને ઓબ્જેક્ટ પર $attrs.onClick હેઠળ ફંક્શન તરીકે એક્સપોઝ કરવામાં આવશે.

અગાઉના વિભાગમાંથી અમારા <MyButton> કમ્પોનન્ટ ઉદાહરણનો ઉપયોગ કરીને - ક્યારેક આપણે સ્ટાઇલ હેતુઓ માટે વાસ્તવિક <button> એલિમેન્ટને વધારાના <div> સાથે લપેટવાની (wrap) જરૂર પડી શકે છે:

<div class="btn-wrapper">
  <button class="btn">મને ક્લિક કરો</button>
</div>

અમે ઇચ્છીએ છીએ કે class અને v-on લિસનર્સ જેવા તમામ ફોલથ્રુ એટ્રિબ્યુટ્સ અંદરના <button> પર લાગુ થાય, બહારના <div> પર નહીં. અમે આને inheritAttrs: false અને v-bind="$attrs" સાથે પ્રાપ્ત કરી શકીએ છીએ:

<div class="btn-wrapper">
  <button class="btn" v-bind="$attrs">મને ક્લિક કરો</button>
</div>

યાદ રાખો કે આર્ગ્યુમેન્ટ વગર v-bind ઓબ્જેક્ટની તમામ પ્રોપર્ટીઝને લક્ષિત એલિમેન્ટના એટ્રિબ્યુટ્સ તરીકે બાંધે છે.

બહુવિધ રૂટ નોડ્સ પર એટ્રિબ્યુટ ઇનહેરિટન્સ ​

સિંગલ રૂટ નોડ વાળા કમ્પોનન્ટ્સ થી વિપરીત, બહુવિધ રૂટ નોડ્સ વાળા કમ્પોનન્ટ્સ માં ઓટોમેટિક એટ્રિબ્યુટ ફોલથ્રુ વર્તન હોતું નથી. જો $attrs સ્પષ્ટ રીતે બાઉન્ડ ન હોય, તો રનટાઇમ વોર્નિંગ આપવામાં આવશે.

<CustomLayout id="custom-layout" @click="changeValue" />

જો <CustomLayout> પાસે નીચેનું મલ્ટી-રૂટ ટેમ્પલેટ છે, તો વોર્નિંગ આવશે કારણ કે Vue ચોક્કસ હોઈ શકતું નથી કે ફોલથ્રુ એટ્રિબ્યુટ્સ ક્યાં લાગુ કરવા:

<header>...</header>
<main>...</main>
<footer>...</footer>

જો $attrs સ્પષ્ટ રીતે બાઉન્ડ હોય તો વોર્નિંગ રદ કરવામાં આવશે:

<header>...</header>
<main v-bind="$attrs">...</main>
<footer>...</footer>

JavaScript માં ફોલથ્રુ એટ્રિબ્યુટ્સ ને એક્સેસ કરવા ​

<script setup>
import { useAttrs } from 'vue'

const attrs = useAttrs()
</script>

export default {
  setup(props, ctx) {
    // ફોલથ્રુ એટ્રિબ્યુટ્સ ctx.attrs તરીકે એક્સપોઝ થાય છે
    console.log(ctx.attrs)
  }
}

export default {
  created() {
    console.log(this.$attrs)
  }
}