પ્રોપ્સ (Props) ​

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

પ્રોપ્સ જાહેર કરવા (Props Declaration) ​

Vue કમ્પોનન્ટ્સને સ્પષ્ટ પ્રોપ્સ ડિકલેરેશન (explicit props declaration) ની જરૂર હોય છે જેથી Vue ને ખબર પડે કે કમ્પોનન્ટમાં કયા બાહ્ય પ્રોપ્સ પાસ કરવામાં આવ્યા છે અને તેને ફૉલથ્રુ એટ્રિબ્યુટ્સ (fallthrough attributes) તરીકે ગણવા જોઈએ (જેની ચર્ચા તેના બનેલા વિભાગ માં કરવામાં આવશે).

<script setup>
const props = defineProps(['foo'])

console.log(props.foo)
</script>

export default {
  props: ['foo'],
  setup(props) {
    // setup() પ્રોપ્સને પ્રથમ આર્ગ્યુમેન્ટ તરીકે મેળવે છે.
    console.log(props.foo)
  }
}

export default {
  props: ['foo'],
  created() {
    // પ્રોપ્સ `this` પર એક્સપોઝ થાય છે
    console.log(this.foo)
  }
}

સ્ટ્રિંગ્સના એરેનો ઉપયોગ કરીને પ્રોપ્સ જાહેર કરવા ઉપરાંત, આપણે ઓબ્જેક્ટ સિન્ટેક્સનો પણ ઉપયોગ કરી શકીએ છીએ:

export default {
  props: {
    title: String,
    likes: Number
  }
}

// <script setup> માં
defineProps({
  title: String,
  likes: Number
})

// non-<script setup> માં
export default {
  props: {
    title: String,
    likes: Number
  }
}

ઓબ્જેક્ટ ડિક્લેરેશન સિન્ટેક્સની દરેક પ્રોપર્ટી માટે, કી પ્રોપનું નામ છે, જ્યારે વેલ્યુ અપેક્ષિત પ્રકારનું કન્સ્ટ્રક્ટર (constructor) ફંક્શન હોવી જોઈએ.

આ માત્ર તમારા કમ્પોનન્ટને ડોક્યુમેન્ટ જ કરતું નથી, પરંતુ જો બ્રાઉઝર કન્સોલમાં તમારું કમ્પોનન્ટ વાપરનારા અન્ય ડેવલપર્સ ખોટો ટાઇપ પાસ કરશે તો તેમને વોર્નિંગ (warn) પણ આપશે. અમે આ પેજ પર આગળ પ્રોપ વેલિડેશન વિશે વધુ વિગતોની ચર્ચા કરીશું.

<script setup lang="ts">
defineProps<{
  title?: string
  likes?: number
}>()
</script>

const { foo } = defineProps(['foo'])

watchEffect(() => {
  // 3.5 પહેલા માત્ર એક જ વાર ચાલે છે
  // 3.5+ માં જ્યારે "foo" પ્રોપ બદલાય છે ત્યારે ફરીથી ચાલે છે
  console.log(foo)
})

const props = defineProps(['foo'])

watchEffect(() => {
  // `foo` કમ્પાઇલર દ્વારા `props.foo` માં ટ્રાન્સફોર્મ કરવામાં આવ્યું છે
  console.log(props.foo)
})

const { foo = 'હેલો' } = defineProps<{ foo?: string }>()

const { foo } = defineProps(['foo'])

watch(foo, /* ... */)

watch(() => foo, /* ... */)

useComposable(() => foo)

પ્રોપ પાસ કરવાની વિગતો ​

પ્રોપ નામ કેસિંગ (Prop Name Casing) ​

અમે ઊંટ શૈલી (camelCase) નો ઉપયોગ કરીને લાંબા પ્રોપ નામો જાહેર કરીએ છીએ કારણ કે આ પ્રોપર્ટી કી તરીકે ઉપયોગ કરતી વખતે અવતરણ ચિહ્નો (quotes) નો ઉપયોગ કરવાનું ટાળે છે, અને અમને ટેમ્પલેટ એક્સપ્રેશન્સમાં સીધો સંદર્ભ આપવા દે છે કારણ કે તે માન્ય JavaScript આઇડેન્ટિફાયર છે:

defineProps({
  greetingMessage: String
})

export default {
  props: {
    greetingMessage: String
  }
}

<span>{{ greetingMessage }}</span>

તકનીકી રીતે, તમે ચાઇલ્ડ કમ્પોનન્ટમાં પ્રોપ્સ પાસ કરતી વખતે camelCase નો ઉપયોગ પણ કરી શકો છો (in-DOM templates સિવાય). જો કે, સંમેલન (convention) એ HTML એટ્રિબ્યુટ્સ સાથે સંરેખિત થવા માટે તમામ કેસોમાં kebab-case નો ઉપયોગ કરવાનું છે:

<MyComponent greeting-message="હેલો" />

જ્યારે શક્ય હોય ત્યારે અમે કમ્પોનન્ટ ટેગ્સ માટે PascalCase નો ઉપયોગ કરીએ છીએ કારણ કે તે નેટિવ એલિમેન્ટ્સ થી Vue કમ્પોનન્ટ્સને પ્રભેદિત (differentiating) કરીને ટેમ્પલેટની વાંચનક્ષમતા વધારે છે. જો કે, પ્રોપ્સ પસાર કરતી વખતે camelCase નો ઉપયોગ કરવાનો એટલો વ્યવહારુ ફાયદો નથી, તેથી અમે દરેક ભાષાના સંમેલનોને અનુસરવાનું પસંદ કરીએ છીએ.

સ્ટેટિક વિરુદ્ધ ડાયનેમિક પ્રોપ્સ ​

અત્યાર સુધી, તમે પ્રોપ્સને સ્ટેટિક વેલ્યુસ તરીકે પસાર થતા જોયા હશે, જેમ કે:

<BlogPost title="Vue સાથેની મારી સફર" />

તમે v-bind અથવા તેના ટૂંકાક્ષર : સાથે ગતિશીલ રીતે અસાઇન કરાયેલા પ્રોપ્સ પણ જોયા છે, જેમ કે:

<!-- વેરિએબલની વેલ્યુ ડાયનેમિકલી અસાઇન કરો -->
<BlogPost :title="post.title" />

<!-- જટિલ એક્સપ્રેશનની વેલ્યુ ડાયનેમિકલી અસાઇન કરો -->
<BlogPost :title="post.title + ' by ' + post.author.name" />

વિવિધ પ્રકારના મૂલ્યો પાસ કરવા ​

ઉપરના બે ઉદાહરણોમાં, અમે સ્ટ્રિંગ વેલ્યુ પાસ કરીએ છીએ, પરંતુ પ્રોપમાં કોઈપણ પ્રકારની વેલ્યુ પાસ કરી શકાય છે.

નંબર (Number) ​

<!-- ભલે `42` સ્ટેટિક છે, તો પણ આપણને Vue ને જણાવવા માટે v-bind ની જરૂર છે કે -->
<!-- આ સ્ટ્રિંગને બદલે JavaScript એક્સપ્રેશન છે. -->
<BlogPost :likes="42" />

<!-- વેરિએબલની વેલ્યુ ડાયનેમિકલી અસાઇન કરો. -->
<BlogPost :likes="post.likes" />

બુલિયન (Boolean) ​

<!-- કોઈ વેલ્યુ વગર પ્રોપનો સમાવેશ કરવાથી `true` સૂચિત થશે. -->
<BlogPost is-published />

<!-- ભલે `false` સ્ટેટિક છે, તો પણ આપણને Vue ને જણાવવા માટે v-bind ની જરૂર છે કે -->
<!-- આ સ્ટ્રિંગને બદલે JavaScript એક્સપ્રેશન છે. -->
<BlogPost :is-published="false" />

<!-- વેરિએબલની વેલ્યુ ડાયનેમિકલી અસાઇન કરો. -->
<BlogPost :is-published="post.isPublished" />

એરે (Array) ​

<!-- ભલે એરે સ્ટેટિક છે, તો પણ આપણને Vue ને જણાવવા માટે v-bind ની જરૂર છે કે -->
<!-- આ સ્ટ્રિંગને બદલે JavaScript એક્સપ્રેશન છે. -->
<BlogPost :comment-ids="[234, 266, 273]" />

<!-- વેરિએબલની વેલ્યુ ડાયનેમિકલી અસાઇન કરો. -->
<BlogPost :comment-ids="post.commentIds" />

ઓબ્જેક્ટ (Object) ​

<!-- ભલે ઓબ્જેક્ટ સ્ટેટિક છે, તો પણ આપણને Vue ને જણાવવા માટે v-bind ની જરૂર છે કે -->
<!-- આ સ્ટ્રિંગને બદલે JavaScript એક્સપ્રેશન છે. -->
<BlogPost
  :author="{
    name: 'Veronica',
    company: 'Veridian Dynamics'
  }"
 />

<!-- વેરિએબલની વેલ્યુ ડાયનેમિકલી અસાઇન કરો. -->
<BlogPost :author="post.author" />

ઓબ્જેક્ટનો ઉપયોગ કરીને બહુવિધ પ્રોપર્ટીઝ બાંધવી ​

જો તમે ઓબ્જેક્ટની તમામ પ્રોપર્ટીઝને પ્રોપ્સ તરીકે પાસ કરવા માંગો છો, તો તમે આર્ગ્યુમેન્ટ વગર v-bind નો ઉપયોગ કરી શકો છો (:prop-name ને બદલે v-bind). ઉદાહરણ તરીકે, આપેલ post ઓબ્જેક્ટ:

export default {
  data() {
    return {
      post: {
        id: 1,
        title: 'Vue સાથેની મારી સફર'
      }
    }
  }
}

const post = {
  id: 1,
  title: 'Vue સાથેની મારી સફર'
}

નીચેનું ટેમ્પલેટ:

<BlogPost v-bind="post" />

આની સમકક્ષ હશે:

<BlogPost :id="post.id" :title="post.title" />

વન-વે ડેટા ફ્લો (One-Way Data Flow) ​

બધા પ્રોપ્સ ચાઇલ્ડ પ્રોપર્ટી અને પેરેન્ટ પ્રોપર્ટી વચ્ચે એક-માર્ગી-ડાઉન બાઇન્ડિંગ (one-way-down binding) બનાવે છે: જ્યારે પેરેન્ટ પ્રોપર્ટી અપડેટ થાય છે, ત્યારે તે ચાઇલ્ડ પાસે નીચે વહેશે, પરંતુ બીજી રીતે નહીં. આ ચાઇલ્ડ કમ્પોનન્ટ્સને અકસ્માતે પેરેન્ટના સ્ટેટને મ્યુટેટ કરવાથી અટકાવે છે, જે તમારી એપ્લિકેશનના ડેટા ફ્લોને સમજવામાં મુશ્કેલ બનાવી શકે છે.

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

const props = defineProps(['foo'])

// ❌ ચેતવણી, પ્રોપ્સ ફક્ત વાંચવા માટે છે!
props.foo = 'bar'

export default {
  props: ['foo'],
  created() {
    // ❌ ચેતવણી, પ્રોપ્સ ફક્ત વાંચવા માટે છે!
    this.foo = 'bar'
  }
}

સામાન્ય રીતે એવા બે કિસ્સાઓ હોય છે જ્યાં પ્રોપ ને મ્યુટેટ કરવાની લાલચ હોય છે:

1. પ્રોપનો ઉપયોગ પ્રારંભિક વેલ્યુ પાસ કરવા માટે થાય છે; ચાઇલ્ડ કમ્પોનન્ટ પછીથી તેને લોકલ ડેટા પ્રોપર્ટી તરીકે વાપરવા માંગે છે. આ કિસ્સામાં, લોકલ ડેટા પ્રોપર્ટીને વ્યાખ્યાયિત કરવી શ્રેષ્ઠ છે જે પ્રોપનો ઉપયોગ તેની પ્રારંભિક વેલ્યુ તરીકે કરે છે:

   js

   const props = defineProps(['initialCounter'])
   
   // કાઉન્ટર ફક્ત પ્રારંભિક વેલ્યુ તરીકે props.initialCounter નો ઉપયોગ કરે છે;
   // તે ભાવિ પ્રોપ અપડેટ્સથી ડિસ્કનેક્ટ (disconnected) છે.
   const counter = ref(props.initialCounter)

   js

   export default {
     props: ['initialCounter'],
     data() {
       return {
         // કાઉન્ટર ફક્ત પ્રારંભિક વેલ્યુ તરીકે props.initialCounter નો ઉપયોગ કરે છે;
         // તે ભાવિ પ્રોપ અપડેટ્સથી ડિસ્કનેક્ટ (disconnected) છે.
         counter: this.initialCounter
       }
     }
   }

2. પ્રોપને કાચા (raw) વેલ્યુ તરીકે પાસ કરવામાં આવે છે જેને ટ્રાન્સફોર્મ કરવાની જરૂર છે. આ કિસ્સામાં, પ્રોપની વેલ્યુનો ઉપયોગ કરીને કમ્પ્યુટેડ પ્રોપર્ટીને વ્યાખ્યાયિત કરવી શ્રેષ્ઠ છે:

   js

   const props = defineProps(['size'])
   
   // કમ્પ્યુટેડ પ્રોપર્ટી જે પ્રોપ બદલાય ત્યારે ઓટો-અપડેટ થાય છે
   const normalizedSize = computed(() => props.size.trim().toLowerCase())

   js

   export default {
     props: ['size'],
     computed: {
       // કમ્પ્યુટેડ પ્રોપર્ટી જે પ્રોપ બદલાય ત્યારે ઓટો-અપડેટ થાય છે
       normalizedSize() {
         return this.size.trim().toLowerCase()
       }
     }
   }

ઓબ્જેક્ટ / એરે પ્રોપ્સ ને મ્યુટેટ કરવા ​

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

આવા મ્યુટેશનનો મુખ્ય ગેરલાભ એ છે કે તે ચાઇલ્ડ કમ્પોનન્ટને પેરેન્ટ સ્ટેટને એવી રીતે અસર કરવાની મંજૂરી આપે છે જે પેરેન્ટ કમ્પોનન્ટ માટે સ્પષ્ટ હોતું નથી, સંભવિતપણે ભવિષ્યમાં ડેટા ફ્લો વિશે તર્ક કરવાનું વધુ મુશ્કેલ બનાવે છે. શ્રેષ્ઠ પ્રેક્ટિસ તરીકે, તમારે આવા મ્યુટેશન ટાળવા જોઈએ સિવાય કે પેરેન્ટ અને ચાઇલ્ડ ડિઝાઇન દ્વારા ચુસ્તપણે જોડાયેલા (tightly coupled) હોય. મોટાભાગના કિસ્સાઓમાં, ચાઇલ્ડે પેરેન્ટને મ્યુટેશન કરવા દેવા માટે ઇવેન્ટ મોકલવી (emit) જોઈએ.

પ્રોપ વેલિડેશન (Prop Validation) ​

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

પ્રોપ વેલિડેશન સ્પષ્ટ કરવા માટે, તમે સ્ટ્રિંગ્સના એરેને બદલે, defineProps() મેક્રોprops ઓપ્શન માટે વેલિડેશન જરૂરિયાતો સાથે ઓબ્જેક્ટ પ્રદાન કરી શકો છો. ઉદાહરણ તરીકે:

defineProps({
  // બેઝિક ટાઇપ ચેક
  // (`null` અને `undefined` વેલ્યુ કોઈપણ ટાઇપ ને સ્વીકારશે)
  propA: Number,
  // બહુવિધ શક્ય ટાઇપ્સ
  propB: [String, Number],
  // જરૂરી સ્ટ્રિંગ
  propC: {
    type: String,
    required: true
  },
  // જરૂરી પરંતુ નલેબલ (nullable) સ્ટ્રિંગ
  propD: {
    type: [String, null],
    required: true
  },
  // ડિફોલ્ટ વેલ્યુ સાથેનો નંબર
  propE: {
    type: Number,
    default: 100
  },
  // ડિફોલ્ટ વેલ્યુ સાથેનો ઓબ્જેક્ટ
  propF: {
    type: Object,
    // ઓબ્જેક્ટ અથવા એરે ડિફોલ્ટ ફેક્ટરી ફંક્શનમાંથી
    // પરત કરવા આવશ્યક છે. ફંક્શન આર્ગ્યુમેન્ટ તરીકે
    // કમ્પોનન્ટ દ્વારા પ્રાપ્ત પાચા પ્રોપ્સ (raw props) મેળવે છે.
    default(rawProps) {
      return { message: 'હેલો' }
    }
  },
  // કસ્ટમ વેલિડેટર ફંક્શન
  // સંપૂર્ણ પ્રોપ્સ 3.4+ માં બીજી આર્ગ્યુમેન્ટ તરીકે પાસ થાય છે
  propG: {
    validator(value, props) {
      // વેલ્યુ આ સ્ટ્રિંગ્સમાંથી એક સાથે મેળ ખાતી હોવી જોઈએ
      return ['success', 'warning', 'danger'].includes(value)
    }
  },
  // ડિફોલ્ટ વેલ્યુ સાથેનું ફંક્શન
  propH: {
    type: Function,
    // ઓબ્જેક્ટ અથવા એરે ડિફોલ્ટથી વિપરીત, આ ફેક્ટરી ફંક્શન નથી
    // - આ ડિફોલ્ટ વેલ્યુ તરીકે સેવા આપવા માટેનું ફંક્શન છે
    default() {
      return 'ડિફોલ્ટ ફંક્શન'
    }
  }
})

export default {
  props: {
    // બેઝિક ટાઇપ ચેક
    // (`null` અને `undefined` વેલ્યુ કોઈપણ ટાઇપ ને સ્વીકારશે)
    propA: Number,
    // બહુવિધ શક્ય ટાઇપ્સ
    propB: [String, Number],
    // જરૂરી સ્ટ્રિંગ
    propC: {
      type: String,
      required: true
    },
    // જરૂરી પરંતુ નલેબલ (nullable) સ્ટ્રિંગ
    propD: {
      type: [String, null],
      required: true
    },
    // ડિફોલ્ટ વેલ્યુ સાથેનો નંબર
    propE: {
      type: Number,
      default: 100
    },
    // ડિફોલ્ટ વેલ્યુ સાથેનો ઓબ્જેક્ટ
    propF: {
      type: Object,
      // ઓબ્જેક્ટ અથવા એરે ડિફોલ્ટ ફેક્ટરી ફંક્શનમાંથી
      // પરત કરવા આવશ્યક છે. ફંક્શન આર્ગ્યુમેન્ટ તરીકે
      // કમ્પોનન્ટ દ્વારા પ્રાપ્ત પાચા પ્રોપ્સ (raw props) મેળવે છે.
      default(rawProps) {
        return { message: 'હેલો' }
      }
    },
    // કસ્ટમ વેલિડેટર ફંક્શન
    // સંપૂર્ણ પ્રોપ્સ 3.4+ માં બીજી આર્ગ્યુમેન્ટ તરીકે પાસ થાય છે
    propG: {
      validator(value, props) {
        // વેલ્યુ આ સ્ટ્રિંગ્સમાંથી એક સાથે મેળ ખાતી હોવી જોઈએ
        return ['success', 'warning', 'danger'].includes(value)
      }
    },
    // ડિફોલ્ટ વેલ્યુ સાથેનું ફંક્શન
    propH: {
      type: Function,
      // ઓબ્જેક્ટ અથવા એરે ડિફોલ્ટથી વિપરીત, આ ફેક્ટરી ફંક્શન નથી
      // - આ ડિફોલ્ટ વેલ્યુ તરીકે સેવા આપવા માટેનું ફંક્શન છે
      default() {
        return 'ડિફોલ્ટ ફંક્શન'
      }
    }
  }
}

વધારાની વિગતો:

• જ્યાં સુધી required: true સ્પષ્ટ કરવામાં ન આવે ત્યાં સુધી બધા પ્રોપ્સ મૂળભૂત રીતે વૈકલ્પિક (optional) છે.

• Boolean સિવાયના ગેરહાજર વૈકલ્પિક પ્રોપમાં undefined વેલ્યુ હશે.

• Boolean ગેરહાજર પ્રોપ્સ false માં કાસ્ટ કરવામાં આવશે. તમે તેના માટે default સેટ કરીને આ બદલી શકો છો — એટલે કે: બિન-બુલિયન પ્રોપ તરીકે વર્તવા માટે default: undefined.

• જો default વેલ્યુ સ્પષ્ટ કરવામાં આવે છે, તો જો રિઝોલ્વ થયેલ પ્રોપ વેલ્યુ undefined હોય તો તેનો ઉપયોગ કરવામાં આવશે - આમાં પ્રોપ ગેરહાજર હોય અથવા સ્પષ્ટ undefined વેલ્યુ પાસ કરવામાં આવે તે બંને કિસ્સાઓનો સમાવેશ થાય છે.

જ્યારે પ્રોપ વેલિડેશન નિષ્ફળ જાય છે, ત્યારે Vue કન્સોલ વોર્નિંગ આપશે (જો ડેવલપમેન્ટ બિલ્ડનો ઉપયોગ કરી રહ્યા હોય).

રનટાઈમ ટાઈપ ચેક (Runtime Type Checks) ​

type નીચેના નેટિવ કન્સ્ટ્રક્ટરોમાંથી એક હોઈ શકે છે:

• String
• Number
• Boolean
• Array
• Object
• Date
• Function
• Symbol
• Error

વધુમાં, type કસ્ટમ ક્લાસ અથવા કન્સ્ટ્રક્ટર ફંક્શન પણ હોઈ શકે છે અને એસર્શન (assertion) instanceof ચેક સાથે કરવામાં આવશે. ઉદાહરણ તરીકે, આપેલ ક્લાસ:

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName
    this.lastName = lastName
  }
}

તમે તેને પ્રોપના ટાઇપ તરીકે ઉપયોગ કરી શકો છો:

defineProps({
  author: Person
})

export default {
  props: {
    author: Person
  }
}

Vue author પ્રોપની વેલ્યુ ખરેખર Person ક્લાસનો ઇન્સ્ટન્સ છે કે કેમ તે ચકાસવા માટે instanceof Person નો ઉપયોગ કરશે.

નલેબલ ટાઈપ (Nullable Type) ​

જો ટાઇપ જરૂરી છે પણ નલેબલ છે, તો તમે એરે સિન્ટેક્સનો ઉપયોગ કરી શકો છો જેમાં null શામેલ છે:

defineProps({
  id: {
    type: [String, null],
    required: true
  }
})

export default {
  props: {
    id: {
      type: [String, null],
      required: true
    }
  }
}

નોંધ કરો કે જો એરે સિન્ટેક્સનો ઉપયોગ કર્યા વગર type માત્ર null હોય, તો તે કોઈપણ પ્રકારને મંજૂરી આપશે.

બુલિયન કાસ્ટિંગ (Boolean Casting) ​

Boolean ટાઇપ ધરાવતા પ્રોપ્સ પાસે નેટિવ બુલિયન એટ્રિબ્યુટ્સના વર્તનને મીમિક (mimic) કરવા માટે ખાસ કાસ્ટિંગ નિયમો છે. નીચેની ડિક્લેરેશન સાથે <MyComponent> આપેલ છે:

defineProps({
  disabled: Boolean
})

export default {
  props: {
    disabled: Boolean
  }
}

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

<!-- :disabled="true" પાસ કરવાને સમકક્ષ -->
<MyComponent disabled />

<!-- :disabled="false" પાસ કરવાને સમકક્ષ -->
<MyComponent />

જ્યારે પ્રોપને બહુવિધ ટાઇપ્સને મંજૂરી આપવા માટે જાહેર કરવામાં આવે છે, ત્યારે Boolean માટે કાસ્ટિંગ નિયમો પણ લાગુ કરવામાં આવશે. જો કે, જ્યારે String અને Boolean બંનેને મંજૂરી આપવામાં આવે ત્યારે એક તફાવત (edge) હોય છે - બુલિયન કાસ્ટિંગ નિયમ ત્યારે જ લાગુ પડે છે જો Boolean, String ની પહેલા આવે:

// disabled ને true માં કાસ્ટ કરવામાં આવશે
defineProps({
  disabled: [Boolean, Number]
})

// disabled ને true માં કાસ્ટ કરવામાં આવશે
defineProps({
  disabled: [Boolean, String]
})

// disabled ને true માં કાસ્ટ કરવામાં આવશે
defineProps({
  disabled: [Number, Boolean]
})

// disabled ને ખાલી સ્ટ્રિંગ તરીકે પાર્સ કરવામાં આવશે (disabled="")
defineProps({
  disabled: [String, Boolean]
})

// disabled ને true માં કાસ્ટ કરવામાં આવશે
export default {
  props: {
    disabled: [Boolean, Number]
  }
}

// disabled ને true માં કાસ્ટ કરવામાં આવશે
export default {
  props: {
    disabled: [Boolean, String]
  }
}

// disabled ને true માં કાસ્ટ કરવામાં આવશે
export default {
  props: {
    disabled: [Number, Boolean]
  }
}

// disabled ને ખાલી સ્ટ્રિંગ તરીકે પાર્સ કરવામાં આવશે (disabled="")
export default {
  props: {
    disabled: [String, Boolean]
  }
}