[{"data":1,"prerenderedAt":213},["Reactive",2],{"content-query-MKRJILsbtS":3},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"slug":10,"featureImg":11,"body":12,"_type":208,"_id":209,"_source":210,"_file":211,"_extension":212},"/blogs/what-are-props","blogs",false,"","what are props ?","Props are custom attributes that you can register on a component. They allow you to pass data from a parent component to a child component. This communication between components enables building modular and reusable code.","what-are-props","https://miro.medium.com/v2/resize:fit:1024/1*4jQEMGWtdEINepQ20STJPA.png",{"type":13,"children":14,"toc":201},"root",[15,24,30,35,41,46,52,57,70,76,97,108,114,135,144,149,158],{"type":16,"tag":17,"props":18,"children":20},"element","h1",{"id":19},"understanding-vuejs-props",[21],{"type":22,"value":23},"text","Understanding Vue.js Props",{"type":16,"tag":25,"props":26,"children":27},"p",{},[28],{"type":22,"value":29},"Vue.js projects consists of components that are reusable pieces of code (javascript) + markup (html).\nnow more often that not, you will come across a scenario where you will have to modify the component UI or the behaviour in different contexts.",{"type":16,"tag":25,"props":31,"children":32},{},[33],{"type":22,"value":34},"Thats where props come in...",{"type":16,"tag":36,"props":37,"children":38},"h2",{"id":10},[39],{"type":22,"value":40},"What are Props?",{"type":16,"tag":25,"props":42,"children":43},{},[44],{"type":22,"value":45},"Props are custom attributes that you can register on a component. They allow you to pass data from a parent component to a child component. This communication between components enables building modular and reusable code while allowing you to modify the component UI or behaviour in different contexts.",{"type":16,"tag":36,"props":47,"children":49},{"id":48},"props-were-there-from-the-start",[50],{"type":22,"value":51},"Props were there from the start !",{"type":16,"tag":25,"props":53,"children":54},{},[55],{"type":22,"value":56},"Now, talking about props take a look at the following block of code.",{"type":16,"tag":58,"props":59,"children":64},"pre",{"className":60,"code":62,"language":63,"meta":7},[61],"language-html","\u003C!-- \n  this is simple input html element which\n renders a simple text input on the screen \n -->\n\n\u003Cinput />\n\n\u003C!-- \n  now what if i want a different type of input element,\n lets say a date time input, i would simply provide the \n `type` prop\n -->\n\n\u003Cinput type=\"date\" />\n\n\u003C!-- \n  and now i see the input is a date time input, \n  which i can select dates with\n\n  following are the possible types you can use \n  as your `type` prop value\n-->\n\n\u003C!-- renders a text input -->\n\u003Cinput type=\"text\" />\n\n\u003C!-- renders a button -->\n\u003Cinput type=\"button\" />\n\n\u003C!-- renders a search input -->\n\u003Cinput type=\"search\" />\n\n\u003C!-- renders a text input which only allows numbers -->\n\u003Cinput type=\"number\" />\n\n\u003C!-- renders a color picker -->\n\u003Cinput type=\"color\" />\n","html",[65],{"type":16,"tag":66,"props":67,"children":68},"code",{"__ignoreMap":7},[69],{"type":22,"value":62},{"type":16,"tag":36,"props":71,"children":73},{"id":72},"declaring-props-in-vuejs",[74],{"type":22,"value":75},"Declaring Props in Vue.js",{"type":16,"tag":25,"props":77,"children":78},{},[79,81,87,89,95],{"type":22,"value":80},"In Vue.js, props are declared in the child component's ",{"type":16,"tag":66,"props":82,"children":84},{"className":83},[],[85],{"type":22,"value":86},"script",{"type":22,"value":88}," block using the ",{"type":16,"tag":66,"props":90,"children":92},{"className":91},[],[93],{"type":22,"value":94},"defineProps",{"type":22,"value":96}," macro. Here's a simple example:",{"type":16,"tag":58,"props":98,"children":103},{"className":99,"code":101,"language":102,"meta":7},[100],"language-vue","\u003C!-- File: Text.vue -->\n\n\u003Cscript setup>\n\ndefineProps\u003C{\n  message: string\n}>()\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cp>{{ message }}\u003C/p>\n\u003C/template>\n","vue",[104],{"type":16,"tag":66,"props":105,"children":106},{"__ignoreMap":7},[107],{"type":22,"value":101},{"type":16,"tag":36,"props":109,"children":111},{"id":110},"using-the-component-with-props",[112],{"type":22,"value":113},"Using the Component with Props",{"type":16,"tag":25,"props":115,"children":116},{},[117,119,125,127,133],{"type":22,"value":118},"lets use the ",{"type":16,"tag":66,"props":120,"children":122},{"className":121},[],[123],{"type":22,"value":124},"Text.vue",{"type":22,"value":126}," component in our ",{"type":16,"tag":66,"props":128,"children":130},{"className":129},[],[131],{"type":22,"value":132},"Parent.vue",{"type":22,"value":134}," component:",{"type":16,"tag":58,"props":136,"children":139},{"className":137,"code":138,"language":102,"meta":7},[100],"\u003C!-- File: Parent.vue -->\n\n\u003Cscript setup>\nimport Text from './Text.vue'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"parent-wrapper\">\n    \u003CText message=\"this is nice !\" />\n  \u003C/div>\n\u003C/template>\n",[140],{"type":16,"tag":66,"props":141,"children":142},{"__ignoreMap":7},[143],{"type":22,"value":138},{"type":16,"tag":25,"props":145,"children":146},{},[147],{"type":22,"value":148},"if you want to bind the message prop to some ref in the parent component",{"type":16,"tag":58,"props":150,"children":153},{"className":151,"code":152,"language":102,"meta":7},[100],"\u003C!-- File: Parent.vue -->\n\n\u003Cscript setup>\nimport Text from './Text.vue'\n\nconst name = ref('Arslan')\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"parent-wrapper\">\n    \u003CText :message=\"name\" />\n  \u003C/div>\n\u003C/template>\n",[154],{"type":16,"tag":66,"props":155,"children":156},{"__ignoreMap":7},[157],{"type":22,"value":152},{"type":16,"tag":25,"props":159,"children":160},{},[161,163,169,171,177,179,184,186,191,193,199],{"type":22,"value":162},"with that your ",{"type":16,"tag":66,"props":164,"children":166},{"className":165},[],[167],{"type":22,"value":168},"message",{"type":22,"value":170}," prop is now bound to the ",{"type":16,"tag":66,"props":172,"children":174},{"className":173},[],[175],{"type":22,"value":176},"name",{"type":22,"value":178}," ref, whenever the ",{"type":16,"tag":66,"props":180,"children":182},{"className":181},[],[183],{"type":22,"value":176},{"type":22,"value":185}," ref updates, your ",{"type":16,"tag":66,"props":187,"children":189},{"className":188},[],[190],{"type":22,"value":168},{"type":22,"value":192}," prop will update and hence the ",{"type":16,"tag":66,"props":194,"children":196},{"className":195},[],[197],{"type":22,"value":198},"\u003CText/>",{"type":22,"value":200}," component would re-render.",{"title":7,"searchDepth":202,"depth":202,"links":203},2,[204,205,206,207],{"id":10,"depth":202,"text":40},{"id":48,"depth":202,"text":51},{"id":72,"depth":202,"text":75},{"id":110,"depth":202,"text":113},"markdown","content:blogs:what-are-props.md","content","blogs/what-are-props.md","md",1706958662621]