કમ્પોનન્ટ્સના મૂળભૂત પાસાઓ (Components Basics) ​

કમ્પોનન્ટ્સ આપણને UI ને સ્વતંત્ર અને પુનઃઉપયોગી ટુકડાઓમાં વિભાજિત કરવાની અને દરેક ટુકડા વિશે અલગથી વિચારવાની મંજૂરી આપે છે. એપ માટે નેસ્ટેડ કમ્પોનન્ટ્સના વૃક્ષ (tree) માં ગોઠવવું સામાન્ય છે:

આ આપણે નેટિવ HTML એલિમેન્ટ્સને કેવી રીતે નેસ્ટ કરીએ છીએ તેના જેવું જ છે, પરંતુ Vue તેનું પોતાનું કમ્પોનન્ટ મોડલ લાગુ કરે છે જે આપણને દરેક કમ્પોનન્ટમાં કસ્ટમ કન્ટેન્ટ અને લોજિકને એન્કેપ્સ્યુલેટ (encapsulate) કરવાની મંજૂરી આપે છે. Vue નેટિવ વેબ કમ્પોનન્ટ્સ (Web Components) સાથે પણ સારી રીતે કામ કરે છે. જો તમે Vue કમ્પોનન્ટ્સ અને નેટિવ વેબ કમ્પોનન્ટ્સ વચ્ચેના સંબંધ વિશે જાણવા માંગતા હો, તો વધુ અહીં વાંચો.

કમ્પોનન્ટ વ્યાખ્યાયિત કરવું ​

બિલ્ડ સ્ટેપનો ઉપયોગ કરતી વખતે, અમે સામાન્ય રીતે .vue એક્સ્ટેંશનનો ઉપયોગ કરીને સમર્પિત ફાઇલમાં દરેક Vue કમ્પોનન્ટને વ્યાખ્યાયિત કરીએ છીએ - જેને સિંગલ-ફાઇલ કમ્પોનન્ટ (Single-File Component) (ટૂંકમાં SFC) તરીકે ઓળખવામાં આવે છે:

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

<template>
  <button @click="count++">તમે મને {{ count }} વાર ક્લિક કર્યો.</button>
</template>

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

const count = ref(0)
</script>

<template>
  <button @click="count++">તમે મને {{ count }} વાર ક્લિક કર્યો.</button>
</template>

બિલ્ડ સ્ટેપનો ઉપયોગ ન કરતી વખતે, Vue કમ્પોનન્ટને Vue-વિશિષ્ટ ઓપ્શન્સ ધરાવતા સાદા JavaScript ઓબ્જેક્ટ તરીકે વ્યાખ્યાયિત કરી શકાય છે:

export default {
  data() {
    return {
      count: 0
    }
  },
  template: `
    <button @click="count++">
      તમે મને {{ count }} વાર ક્લિક કર્યો.
    </button>`
}

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    return { count }
  },
  template: `
    <button @click="count++">
      તમે મને {{ count }} વાર ક્લિક કર્યો.
    </button>`
  // in-DOM ટેમ્પલેટને પણ લક્ષ્ય બનાવી શકે છે:
  // template: '#my-template-element'
}

ટેમ્પલેટ અહીં જાવાસ્ક્રિપ્ટ સ્ટ્રિંગ તરીકે ઇનલાઈન કરવામાં આવ્યું છે, જેને Vue ઉડતા-ઉડતા (on the fly) કમ્પાઇલ કરશે. તમે એલિમેન્ટ (સામાન્ય રીતે નેટિવ <template> એલિમેન્ટ્સ) તરફ નિર્દેશ કરતા ID સિલેક્ટરનો પણ ઉપયોગ કરી શકો છો - Vue તેના કન્ટેન્ટનો ટેમ્પલેટ સોર્સ તરીકે ઉપયોગ કરશે.

ઉપરનું ઉદાહરણ સિંગલ કમ્પોનન્ટને વ્યાખ્યાયિત કરે છે અને તેને .js ફાઇલના ડિફોલ્ટ એક્સપોર્ટ તરીકે એક્સપોર્ટ કરે છે, પરંતુ તમે સમાન ફાઇલમાંથી બહુવિધ કમ્પોનન્ટ્સ એક્સપોર્ટ કરવા માટે નામવાળા એક્સપોર્ટ્સ (named exports) નો ઉપયોગ કરી શકો છો.

કમ્પોનન્ટનો ઉપયોગ કરવો ​

ચાઇલ્ડ કમ્પોનન્ટનો ઉપયોગ કરવા માટે, આપણે તેને પેરેન્ટ કમ્પોનન્ટમાં ઇમ્પોર્ટ કરવાની જરૂર છે. ધારો કે આપણે આપણું કાઉન્ટર કમ્પોનન્ટ ButtonCounter.vue નામની ફાઇલની અંદર મૂક્યું છે, તો ઘટક ફાઇલના ડિફોલ્ટ એક્સપોર્ટ તરીકે એક્સપોઝ થશે:

<script>
import ButtonCounter from './ButtonCounter.vue'

export default {
  components: {
    ButtonCounter
  }
}
</script>

<template>
  <h1>અહીં એક ચાઇલ્ડ કમ્પોનન્ટ છે!</h1>
  <ButtonCounter />
</template>

<script setup>
import ButtonCounter from './ButtonCounter.vue'
</script>

<template>
  <h1>અહીં એક ચાઇલ્ડ કમ્પોનન્ટ છે!</h1>
  <ButtonCounter />
</template>

કમ્પોનન્ટને ગ્લોબલી રજીસ્ટર કરવું પણ શક્ય છે, તેને ઇમ્પોર્ટ કર્યા વગર આપેલ એપના તમામ ઘટકો માટે ઉપલબ્ધ કરાવી શકાય છે. ગ્લોબલ વિરુદ્ધ લોકલ રજીસ્ટ્રેશનના ફાયદા અને ગેરફાયદાની ચર્ચા સમર્પિત કમ્પોનન્ટ રજીસ્ટ્રેશન વિભાગમાં કરવામાં આવી છે.

કમ્પોનન્ટ્સનો તમે ઇચ્છો તેટલી વખત પુનઃઉપયોગ કરી શકાય છે:

<h1>અહીં ઘણા ચાઇલ્ડ કમ્પોનન્ટ્સ છે!</h1>
<ButtonCounter />
<ButtonCounter />
<ButtonCounter />

નોંધ લો કે બટનો પર ક્લિક કરતી વખતે, દરેક તેનું પોતાનું, અલગ count જાળવી રાખે છે. તેનું કારણ એ છે કે જ્યારે પણ તમે કમ્પોનન્ટનો ઉપયોગ કરો છો, ત્યારે તેનો નવો ઇન્સ્ટન્સ બનાવવામાં આવે છે.

SFC માં, નેટિવ HTML એલિમેન્ટ્સથી અલગ પાડવા માટે ચાઇલ્ડ કમ્પોનન્ટ્સ માટે PascalCase ટેગ નામોનો ઉપયોગ કરવાની ભલામણ કરવામાં આવે છે. જોકે નેટિવ HTML ટેગ નામો કેસ-ઇનસેન્સિટિવ (case-insensitive) છે, Vue SFC એ કમ્પાઇલ કરેલ ફોર્મેટ છે તેથી અમે તેમાં કેસ-સેન્સિટિવ ટેગ નામોનો ઉપયોગ કરવા સક્ષમ છીએ. અમે ટેગ બંધ કરવા માટે /> નો ઉપયોગ કરવા માટે પણ સક્ષમ છીએ.

જો તમે તમારા ટેમ્પલેટ્સ સીધા DOM માં લખી રહ્યા છો (દા.ત. નેટિવ <template> એલિમેન્ટના કન્ટેન્ટ તરીકે), તો ટેમ્પલેટ બ્રાઉઝરના નેટિવ HTML પાર્સિંગ વર્તનને આધીન રહેશે. આવા કિસ્સાઓમાં, તમારે કમ્પોનન્ટ્સ માટે kebab-case અને સ્પષ્ટ બંધ ટેગ (closing tags) નો ઉપયોગ કરવાની જરૂર પડશે:

<!-- જો આ ટેમ્પલેટ DOM માં લખાયેલ હોય -->
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>

વધુ વિગતો માટે In-DOM ટેમ્પલેટ પાર્સિંગ સાવચેતીઓ જુઓ.

પ્રોપ્સ (Props) પાસ કરવા ​

જો આપણે બ્લોગ બનાવી રહ્યા છીએ, તો આપણને બ્લોગ પોસ્ટનું પ્રતિનિધિત્વ કરતા ઘટકની જરૂર પડશે. આપણે ઇચ્છીએ છીએ કે તમામ બ્લોગ પોસ્ટ સમાન વિઝ્યુઅલ લેઆઉટ શેર કરે, પરંતુ અલગ અલગ કન્ટેન્ટ સાથે. આવો કમ્પોનન્ટ ઉપયોગી થશે નહીં જ્યાં સુધી તમે તેને ડેટા પાસ ન કરી શકો, જેમ કે આપણે જે ચોક્કસ પોસ્ટ પ્રદર્શિત કરવા માંગીએ છીએ તેનું ટાઇટલ અને કન્ટેન્ટ. ત્યાં જ પ્રોપ્સ (props) કામમાં આવે છે.

પ્રોપ્સ એ કસ્ટમ એટ્રિબ્યુટ્સ છે જે તમે કમ્પોનન્ટ પર રજીસ્ટર કરી શકો છો. અમારી બ્લોગ પોસ્ટના ઘટકમાં ટાઇટલ પાસ કરવા માટે, અમે આ કમ્પોનન્ટ સ્વીકારે છે તે પ્રોપ્સની યાદીમાં props ઓપ્શનdefineProps મેક્રો નો ઉપયોગ કરીને તેને જાહેર કરવું જોઈએ:

<script>
export default {
  props: ['title']
}
</script>

<template>
  <h4>{{ title }}</h4>
</template>

<script setup>
defineProps(['title'])
</script>

<template>
  <h4>{{ title }}</h4>
</template>

const props = defineProps(['title'])
console.log(props.title)

export default {
  props: ['title'],
  setup(props) {
    console.log(props.title)
  }
}

કમ્પોનન્ટમાં તમે ઈચ્છો તેટલા પ્રોપ્સ હોઈ શકે છે અને, ડિફોલ્ટ રૂપે, કોઈપણ વેલ્યુ કોઈપણ પ્રોપમાં પાસ કરી શકાય છે.

એકવાર પ્રોપ રજીસ્ટર થઈ જાય, પછી તમે ડેટાને કસ્ટમ એટ્રિબ્યુટ તરીકે પાસ કરી શકો છો, આ રીતે:

<BlogPost title="Vue સાથેની મારી સફર" />
<BlogPost title="Vue સાથે બ્લોગિંગ" />
  <BlogPost title="શા માટે Vue આટલું મજાનું છે" />

સામાન્ય એપમાં, જોકે, તમારા પેરેન્ટ કમ્પોનન્ટમાં પોસ્ટ્સનો એરે હશે:

export default {
  // ...
  data() {
    return {
      posts: [
        { id: 1, title: 'Vue સાથેની મારી સફર' },
        { id: 2, title: 'Vue સાથે બ્લોગિંગ' },
        { id: 3, title: 'શા માટે Vue આટલું મજાનું છે' }
      ]
    }
  }
}

const posts = ref([
  { id: 1, title: 'Vue સાથેની મારી સફર' },
  { id: 2, title: 'Vue સાથે બ્લોગિંગ' },
  { id: 3, title: 'શા માટે Vue આટલું મજાનું છે' }
])

પછી v-for નો ઉપયોગ કરીને દરેક માટે એક ઘટક રેન્ડર કરવા માંગો છો:

<BlogPost
  v-for="post in posts"
  :key="post.id"
  :title="post.title"
 />

નોંધ કરો કે ડાયનેમિક પ્રોપ વેલ્યુસ પાસ કરવા માટે v-bind સિન્ટેક્સ (:title="post.title") નો ઉપયોગ કેવી રીતે થાય છે. જ્યારે તમને ખબર હોતી નથી કે તમે કયું ચોક્કસ કન્ટેન્ટ આગળ રેન્ડર કરવા જેઈ રહ્યા છો ત્યારે આ ખાસ કરીને ઉપયોગી છે.

અત્યારે પ્રોપ્સ વિશે તમારે આટલું જ જાણવાની જરૂર છે, પરંતુ એકવાર તમે આ પેજ વાંચવાનું પૂરું કરી લો અને તેના કન્ટેન્ટ સાથે આરામદાયક અનુભવો, પછી અમે પ્રોપ્સ (Props) પર સંપૂર્ણ માર્ગદર્શિકા વાંચવા માટે પછીથી પાછા આવવાની ભલામણ કરીએ છીએ.

ઇવેન્ટ્સ સાંભળવી ​

જેમ જેમ આપણે આપણું <BlogPost> કમ્પોનન્ટ વિકસાવીએ છીએ, કેટલીક સુવિધાઓ માટે પેરેન્ટ ને જણાવવાની જરૂર પડી શકે છે. ઉદાહરણ તરીકે, અમે બાકીના પેજને તેના ડિફોલ્ટ કદ પર રાખીને, બ્લોગ પોસ્ટ્સના લખાણને મોટું કરવા માટે એક્સેસિબિલિટી ફીચર (accessibility feature) સમાવવાનું નક્કી કરી શકીએ છીએ.

પેરેન્ટમાં, અમે postFontSize ડેટા પ્રોપર્ટીરિફ ઉમેરીને આ સુવિધાને સપોર્ટ કરી શકીએ છીએ:

data() {
  return {
    posts: [
      /* ... */
    ],
    postFontSize: 1
  }
}

const posts = ref([
  /* ... */
])

const postFontSize = ref(1)

જેનો ઉપયોગ તમામ બ્લોગ પોસ્ટ્સના ફોન્ટ સાઈઝને નિયંત્રિત કરવા માટે ટેમ્પલેટમાં થઈ શકે છે:

<div :style="{ fontSize: postFontSize + 'em' }">
  <BlogPost
    v-for="post in posts"
    :key="post.id"
    :title="post.title"
   />
</div>

હવે ચાલો <BlogPost> કમ્પોનન્ટના ટેમ્પલેટમાં એક બટન ઉમેરીએ:

<!-- <script> ને અવગણીને -->
<template>
  <div class="blog-post">
    <h4>{{ title }}</h4>
    <button>લખાણ મોટું કરો</button>
  </div>
</template>

બટન હજુ સુધી કંઈ કરતું નથી - અમે ઇચ્છીએ છીએ કે બટન પર ક્લિક કરવાથી પેરેન્ટને જાણ કરવામાં આવે કે તેણે બધી પોસ્ટના લખાણને મોટું કરવું જોઈએ. આ સમસ્યાને ઉકેલવા માટે, ઘટકો કસ્ટમ ઇવેન્ટ સિસ્ટમ પ્રદાન કરે છે. પેરેન્ટ v-on અથવા @ સાથે ચાઇલ્ડ કમ્પોનન્ટ ઇન્સ્ટન્સ પર કોઈપણ ઇવેન્ટ સાંભળવાનું પસંદ કરી શકે છે, જેમ આપણે નેટિવ DOM ઇવેન્ટ સાથે કરીશું:

<BlogPost
  ...
  @enlarge-text="postFontSize += 0.1"
 />

પછી ચાઇલ્ડ કમ્પોનન્ટ બિલ્ટ-ઇન $emit મેથડ ને કૉલ કરીને, ઇવેન્ટનું નામ પાસ કરીને પોતાની જાત પર ઇવેન્ટ મોકલી શકે છે:

<!-- <script> ને અવગણીને -->
<template>
  <div class="blog-post">
    <h4>{{ title }}</h4>
    <button @click="$emit('enlarge-text')">લખાણ મોટું કરો</button>
  </div>
</template>

@enlarge-text="postFontSize += 0.1" લિસનરના કારણે, પેરેન્ટ ઇવેન્ટ પ્રાપ્ત કરશે અને postFontSize ની વેલ્યુ અપડેટ કરશે.

આપણે વૈકલ્પિક રીતે emits ઓપ્શનdefineEmits મેક્રો નો ઉપયોગ કરીને એમિટ થયેલ ઇવેન્ટ્સ જાહેર કરી શકીએ છીએ:

<script>
export default {
  props: ['title'],
  emits: ['enlarge-text']
}
</script>

<script setup>
defineProps(['title'])
defineEmits(['enlarge-text'])
</script>

આ ઘટક જે બધી ઇવેન્ટ્સ મોકલે છે તેને દસ્તાવેજ (documents) કરે છે અને વૈકલ્પિક રીતે તેમને વેલિડેટ કરે છે. તે Vue ને ચાઇલ્ડ કમ્પોનન્ટના રૂટ એલિમેન્ટ પર નેટિવ લિસનર્સ તરીકે સ્પષ્ટપણે લાગુ કરવાનું ટાળવાની પણ મંજૂરી આપે છે.

<script setup>
const emit = defineEmits(['enlarge-text'])

emit('enlarge-text')
</script>

export default {
  emits: ['enlarge-text'],
  setup(props, ctx) {
    ctx.emit('enlarge-text')
  }
}

કસ્ટમ કમ્પોનન્ટ ઇવેન્ટ્સ વિશે અત્યારે તમારે આટલું જ જાણવાની જરૂર છે, પરંતુ એકવાર તમે આ પેજ વાંચવાનું પૂરું કરી લો અને તેના કન્ટેન્ટ સાથે આરામદાયક અનુભવો, પછી અમે કસ્ટમ ઇવેન્ટ્સ પર સંપૂર્ણ માર્ગદર્શિકા વાંચવા માટે પછીથી પાછા આવવાની ભલામણ કરીએ છીએ.

સ્લોટ્સ (Slots) સાથે કન્ટેન્ટ ડિસ્ટ્રિબ્યુશન ​

બરાબર HTML એલિમેન્ટ્સની જેમ, કમ્પોનન્ટમાં કન્ટેન્ટ પાસ કરવામાં સક્ષમ હોવું ઘણીવાર ઉપયોગી છે, આ રીતે:

<AlertBox>
  કંઈક ખરાબ થયું.
</AlertBox>

જે આના જેવું કંઈક રેન્ડર કરી શકે છે:

આ Vue ના કસ્ટમ <slot> એલિમેન્ટનો ઉપયોગ કરીને પ્રાપ્ત કરી શકાય છે:

<template>
  <div class="alert-box">
    <strong>ડેમો હેતુઓ માટે આ એક ભૂલ છે</strong>
    <slot />
  </div>
</template>

<style scoped>
.alert-box {
  /* ... */
}
</style>

જેમ તમે ઉપર જોશો, અમે <slot> નો ઉપયોગ પ્લેસહોલ્ડર (placeholder) તરીકે કરીએ છીએ જ્યાં અમે કન્ટેન્ટ રાખવા માંગીએ છીએ – અને બસ. અમે કરી દીધું!

સ્લોટ્સ વિશે અત્યારે તમારે આટલું જ જાણવાની જરૂર છે, પરંતુ એકવાર તમે આ પેજ વાંચવાનું પૂરું કરી લો અને તેના કન્ટેન્ટ સાથે આરામદાયક અનુભવો, પછી અમે સ્લોટ્સ (Slots) પર સંપૂર્ણ માર્ગદર્શિકા વાંચવા માટે પછીથી પાછા આવવાની ભલામણ કરીએ છીએ.

ડાયનેમિક કમ્પોનન્ટ્સ (Dynamic Components) ​

કેટલીકવાર, ઘટકો વચ્ચે ડાયનેમિકલી સ્વિચ કરવું ઉપયોગી છે, જેમ કે ટેબ્ડ ઇન્ટરફેસ (tabbed interface) માં:

ઉપરોક્ત વિશેષ is એટ્રિબ્યુટ સાથે Vue ના <component> એલિમેન્ટ દ્વારા શક્ય બન્યું છે:

<!-- જ્યારે currentTab બદલાય ત્યારે ઘટક બદલાય છે -->
<component :is="currentTab"></component>

<!-- જ્યારે currentTab બદલાય ત્યારે ઘટક બદલાય છે -->
<component :is="tabs[currentTab]"></component>

ઉપરના ઉદાહરણમાં, :is ને પાસ કરાયેલ વેલ્યુ કાં તો આ હોઈ શકે છે:

• નોંધાયેલ કમ્પોનન્ટનું નામ સ્ટ્રિંગ, અથવા
• વાસ્તવિક ઇમ્પોર્ટ કરેલ કમ્પોનન્ટ ઓબ્જેક્ટ

તમે રેગ્યુલર HTML એલિમેન્ટ્સ બનાવવા માટે is એટ્રિબ્યુટનો પણ ઉપયોગ કરી શકો છો.

<component :is="..."> સાથે બહુવિધ ઘટકો વચ્ચે સ્વિચ કરતી વખતે, ઘટક જ્યારે સ્વિચ કરવામાં આવે ત્યારે તે અનમાઉન્ટ થઈ જશે. અમે બિલ્ટ-ઇન <KeepAlive> કમ્પોનન્ટ વડે નિષ્ક્રિય ઘટકોને "જીવંત (alive)" રહેવા માટે દબાણ કરી શકીએ છીએ.

in-DOM ટેમ્પલેટ પાર્સિંગ સાવચેતીઓ ​

જો તમે તમારા Vue ટેમ્પલેટ સીધા DOM માં લખી રહ્યા છો, તો Vue એ DOM માંથી ટેમ્પલેટ સ્ટ્રિંગ મેળવવી પડશે. આ બ્રાઉઝર્સના નેટિવ HTML પાર્સિંગ વર્તનને કારણે કેટલીક સાવચેતીઓ દોરે છે.

કેસ ઇનસેન્સિટિવિટી (Case Insensitivity) ​

HTML ટેગ્સ અને એટ્રિબ્યુટ નામો કેસ-ઇનસેન્સિટિવ છે, તેથી બ્રાઉઝર્સ કોઈપણ અપરકેસ અક્ષરોને લોઅરકેસ તરીકે અર્થઘટન કરશે. તેનો અર્થ એ કે જ્યારે તમે in-DOM ટેમ્પલેટ્સનો ઉપયોગ કરી રહ્યાં હોવ, ત્યારે PascalCase કમ્પોનન્ટ નામો અને camelCased પ્રોપ નામો અથવા v-on ઇવેન્ટ નામો બધાએ તેમના kebab-cased (હાઇફન-સીમિત) સમકક્ષોનો ઉપયોગ કરવાની જરૂર છે:

// JavaScript માં camelCase
const BlogPost = {
  props: ['postTitle'],
  emits: ['updatePost'],
  template: `
    <h3>{{ postTitle }}</h3>
  `
}

<!-- HTML માં kebab-case -->
<blog-post post-title="હેલો!" @update-post="onUpdatePost"></blog-post>

સ્વયં બંધ થતા ટેગ (Self Closing Tags) ​

અમે અગાઉના કોડ નમૂનાઓમાં ઘટકો માટે સ્વયં-બંધ (self-closing) ટેગનો ઉપયોગ કરી રહ્યા છીએ:

<MyComponent />

આનું કારણ એ છે કે Vue નું ટેમ્પલેટ પાર્સર તેના પ્રકારને ધ્યાનમાં લીધા વગર કોઈપણ ટેગને સમાપ્ત કરવાના સંકેત તરીકે /> ને માન આપે છે.

જોકે, in-DOM ટેમ્પલેટ્સમાં, આપણે હંમેશા સ્પષ્ટ સમાપ્તિ ટેગ (explicit closing tags) નો સમાવેશ કરવો જોઈએ:

<my-component></my-component>

આનું કારણ એ છે કે HTML સ્પેક ફક્ત થોડા વિશિષ્ટ એલિમેન્ટ્સ ને ક્લોઝિંગ ટેગ્સ છોડવાની મંજૂરી આપે છે, જે સૌથી સામાન્ય <input> અને <img> છે. અન્ય તમામ એલિમેન્ટ્સ માટે, જો તમે ક્લોઝિંગ ટેગ છોડી દો છો, તો નેટિવ HTML પાર્સર વિચારશે કે તમે ઓપનિંગ ટેગ ક્યારેય સમાપ્ત કર્યો નથી. ઉદાહરણ તરીકે, નીચેનું સ્નિપેટ:

<my-component /> <!-- અમે અહીં ટેગ બંધ કરવાનો ઈરાદો રાખીએ છીએ... -->
<span>હેલો</span>

આ રીતે પાર્સ કરવામાં આવશે:

<my-component>
  <span>હેલો</span>
</my-component> <!-- પરંતુ બ્રાઉઝર તેને અહીં બંધ કરશે. -->

એલિમેન્ટ પ્લેસમેન્ટ પ્રતિબંધો (Element Placement Restrictions) ​

કેટલાક HTML એલિમેન્ટ્સ, જેમ કે <ul>, <ol>, <table> અને <select> ની અંદર કયા એલિમેન્ટ્સ દેખાઈ શકે છે તેના પર પ્રતિબંધો છે, અને કેટલાક એલિમેન્ટ્સ જેમ કે <li>, <tr>, અને <option> ફક્ત અમુક અન્ય એલિમેન્ટ્સની અંદર જ દેખાઈ શકે છે.

જ્યારે આવા પ્રતિબંધો ધરાવતા એલિમેન્ટ્સ સાથે કમ્પોનન્ટ્સનો ઉપયોગ કરવામાં આવે ત્યારે આ સમસ્યાઓ તરફ દોરી જશે. ઉદાહરણ તરીકે:

<table>
  <blog-post-row></blog-post-row>
</table>

કસ્ટમ કમ્પોનન્ટ <blog-post-row> અમાન્ય કન્ટેન્ટ તરીકે બહાર આવશે, જે અંતિમ રેન્ડર આઉટપુટમાં ભૂલો પેદા કરશે. અમે ઉકેલ તરીકે વિશેષ is એટ્રિબ્યુટ નો ઉપયોગ કરી શકીએ છીએ:

<table>
  <tr is="vue:blog-post-row"></tr>
</table>

ઇન-DOM ટેમ્પલેટ પાર્સિંગ સાવચેતીઓ વિશે અત્યારે તમારે આટલું જ જાણવાની જરૂર છે - અને ખરેખર, Vue ના બેઝિક્સ નો અંત. અભિનંદન! હજી ઘણું શીખવાનું બાકી છે, પરંતુ પ્રથમ, અમે ભલામણ કરીએ છીએ કે તમે જાતે Vue સાથે રમવા માટે વિરામ લો - કંઈક મજાનું બનાવો, અથવા જો તમે પહેલેથી જોયા નથી તો કેટલાક ઉદાહરણો તપાસો.

એકવાર તમે હમણાં જ મેળવેલા જ્ઞાન સાથે આરામદાયક અનુભવો, પછી ઘટકો વિશે વધુ ઊંડાણપૂર્વક જાણવા માટે માર્ગદર્શિકા સાથે આગળ વધો.