[{"data":1,"prerenderedAt":226},["ShallowReactive",2],{"term-p\u002Fprops":3,"related-p\u002Fprops":209},{"id":4,"title":5,"acronym":6,"body":7,"category":191,"description":192,"difficulty":193,"extension":194,"letter":16,"meta":195,"navigation":128,"path":196,"related":197,"seo":203,"sitemap":204,"stem":207,"subcategory":6,"__hash__":208},"terms\u002Fterms\u002Fp\u002Fprops.md","Props",null,{"type":8,"value":9,"toc":185},"minimark",[10,15,19,23,26,30,174,178,181],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"Props are how you pass information INTO a component, like giving a coffee machine its settings. You tell the component 'hey, be blue and say Hello' and it uses those values. Props only flow downward — from parent to child.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"Props (short for properties) are read-only inputs passed from a parent component to a child component. They allow components to be configurable and reusable. In React, props are plain objects; in Vue, they're declared with defineProps(). Components should never mutate their own props.",[11,27,29],{"id":28},"show-me-the-code","Show Me The Code",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-jsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F React\nfunction Badge({ label, color }) {\n  return \u003Cspan style={{ color }}>{label}\u003C\u002Fspan>;\n}\n\n\u002F\u002F Usage\n\u003CBadge label=\"Admin\" color=\"red\" \u002F>\n","jsx","",[38,39,40,49,80,117,123,130,136],"code",{"__ignoreMap":36},[41,42,45],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sHwdD","\u002F\u002F React\n",[41,50,52,56,60,64,68,71,74,77],{"class":43,"line":51},2,[41,53,55],{"class":54},"spNyl","function",[41,57,59],{"class":58},"s2Zo4"," Badge",[41,61,63],{"class":62},"sMK4o","({",[41,65,67],{"class":66},"sHdIc"," label",[41,69,70],{"class":62},",",[41,72,73],{"class":66}," color",[41,75,76],{"class":62}," })",[41,78,79],{"class":62}," {\n",[41,81,83,87,90,93,96,99,103,106,109,112,114],{"class":43,"line":82},3,[41,84,86],{"class":85},"s7zQu","  return",[41,88,89],{"class":62}," \u003C",[41,91,41],{"class":92},"swJcz",[41,94,95],{"class":54}," style",[41,97,98],{"class":62},"={{",[41,100,102],{"class":101},"sTEyZ"," color ",[41,104,105],{"class":62},"}}>{",[41,107,108],{"class":101},"label",[41,110,111],{"class":62},"}\u003C\u002F",[41,113,41],{"class":92},[41,115,116],{"class":62},">;\n",[41,118,120],{"class":43,"line":119},4,[41,121,122],{"class":62},"}\n",[41,124,126],{"class":43,"line":125},5,[41,127,129],{"emptyLinePlaceholder":128},true,"\n",[41,131,133],{"class":43,"line":132},6,[41,134,135],{"class":47},"\u002F\u002F Usage\n",[41,137,139,142,146,148,151,154,158,160,162,164,166,169,171],{"class":43,"line":138},7,[41,140,141],{"class":62},"\u003C",[41,143,145],{"class":144},"sBMFI","Badge",[41,147,67],{"class":54},[41,149,150],{"class":62},"=",[41,152,153],{"class":62},"\"",[41,155,157],{"class":156},"sfazB","Admin",[41,159,153],{"class":62},[41,161,73],{"class":54},[41,163,150],{"class":62},[41,165,153],{"class":62},[41,167,168],{"class":156},"red",[41,170,153],{"class":62},[41,172,173],{"class":62}," \u002F>\n",[11,175,177],{"id":176},"when-youll-hear-this","When You'll Hear This",[16,179,180],{},"\"Pass the user's name as a prop to the Avatar component.\" \u002F \"Don't mutate props — emit an event instead.\"",[182,183,184],"style",{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":36,"searchDepth":51,"depth":51,"links":186},[187,188,189,190],{"id":13,"depth":51,"text":14},{"id":21,"depth":51,"text":22},{"id":28,"depth":51,"text":29},{"id":176,"depth":51,"text":177},"frontend","Props are how you pass information INTO a component, like giving a coffee machine its settings.","beginner","md",{},"\u002Fterms\u002Fp\u002Fprops",[198,199,200,201,202],"Component","State","Binding","Two-way Binding","Slot",{"title":5,"description":192},{"changefreq":205,"priority":206},"weekly",0.7,"terms\u002Fp\u002Fprops","vM6QBzZdU3Gztgr0QGU7UPOEZKzzUmoF4IZYc57izQY",[210,213,216,220,223],{"title":200,"path":211,"acronym":6,"category":191,"difficulty":193,"description":212},"\u002Fterms\u002Fb\u002Fbinding","Binding is connecting your data to your HTML so they stay in sync.",{"title":198,"path":214,"acronym":6,"category":191,"difficulty":193,"description":215},"\u002Fterms\u002Fc\u002Fcomponent","A component is a self-contained LEGO brick for your UI.",{"title":202,"path":217,"acronym":6,"category":191,"difficulty":218,"description":219},"\u002Fterms\u002Fs\u002Fslot","intermediate","A slot is a placeholder in a component where a parent can inject its own custom content.",{"title":199,"path":221,"acronym":6,"category":191,"difficulty":193,"description":222},"\u002Fterms\u002Fs\u002Fstate","State is a component's memory — data that can change over time and causes the UI to update when it does. Think of a counter: the number is state.",{"title":201,"path":224,"acronym":6,"category":191,"difficulty":218,"description":225},"\u002Fterms\u002Ft\u002Ftwo-way-binding","Two-way binding means your data and your input field are best friends who always tell each other what changed. Type in the box and the data updates.",1776518304272]