Vue માં components અને props કેવી રીતે કામ કરે છે?

Question

Accepted Answer

**Components** પુનઃપ્રયોજ્ય, આત્મ-સમાવિષ્ટ UI ના ટુકડા છે. **Props** એ છે તે રીતે જે પણ માતાપિતા બાળક *નીચે* ડેટા પાસ કરે છે — તે બાળકના ટાઇપ કરેલા, ફક્ત-વાંચવા યોગ્ય ઇનપુટ છે. ## બાળકમાં props વ્યાખ્યાયિત કરવું ```vue ``` ## માતાપિતા પાસેથી props પાસ કરવું ```vue ``` પાર્થક્ય નોંધો: `name="Ann"` શાબ્દિક સ્ટ્રિંગ પાસ કરે છે, જ્યારે `:age="30"` (સાથે `v-bind`) અભિવ્યક્તિ મૂલ્યાંકન કરે છે — સંખ્યાઓ, બુલિયનો, ઑબ્જેક્ટ્સ અથવા ચલો માટે જરૂરી છે. હીયો નોંધ કે prop નામો JS માં `camelCase` છે પણ templates માં `kebab-case` છે (`isAdmin` → `:is-admin`). ## Props એક-માર્ગ અને ફક્ત-વાંચવા યોગ્ય છે ```js props.name = "Bob"; // ❌ Vue warns — never mutate a prop ``` ડેટા **નીચે** વહે છે (માતાપિતા → બાળક). બાળક તેના props માં ફેરફાર કરતું નથી; જો તેને કંઈક બદલવાની જરૂર હોય તો તે કે તો સ્થાનિક નકલ વાપરે છે અથવા **ઇવેન્ટ નું ઉત્સર્જન કરે છે** માતાપિતાને સ્ત્રોત બદલવા માટે કહે છે ("props નીચે, ઇવેન્ટ્સ ઉપર"). આ એક-માર્ગ પ્રવાહ ડેટાને અનુમાનિત રાખે છે. ## TypeScript props ```vue ``` ## શા માટે તે મહત્વપૂર્ણ છે Components + props Vue આર્કિટેકચરનો પાયો છે — તમે પુનઃપ્રયોજ્ય components પાસેથી UIs સંયોજીત કરો અને તેમને props દ્વારા ગોઠવો. સમજવું કે props **એક-માર્ગ અને ફક્ત-વાંચવા યોગ્ય** (ડેટા નીચે, ઇવેન્ટ્સ ઉપર) હોય તે Vue apps ને અનુમાનિત રાખવાની મૂળ માનસિક મોડલ છે; props માં પરિવર્તન અથવા બે-માર્ગ prop પ્રવાહની અપેક્ષા કરવી bugs નો ક્લાસિક સ્ત્રોત છે.