[{"data":1,"prerenderedAt":214},["Reactive",2],{"content-query-mrWAxypuf6":3},[4],{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":9,"description":10,"slug":11,"featureImg":12,"body":13,"_type":209,"_id":210,"_source":211,"_file":212,"_extension":213},"/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":14,"children":15,"toc":202},"root",[16,25,31,36,42,47,53,58,71,77,98,109,115,136,145,150,159],{"type":17,"tag":18,"props":19,"children":21},"element","h1",{"id":20},"understanding-vuejs-props",[22],{"type":23,"value":24},"text","Understanding Vue.js Props",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"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":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"Thats where props come in...",{"type":17,"tag":37,"props":38,"children":39},"h2",{"id":11},[40],{"type":23,"value":41},"What are Props?",{"type":17,"tag":26,"props":43,"children":44},{},[45],{"type":23,"value":46},"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":17,"tag":37,"props":48,"children":50},{"id":49},"props-were-there-from-the-start",[51],{"type":23,"value":52},"Props were there from the start !",{"type":17,"tag":26,"props":54,"children":55},{},[56],{"type":23,"value":57},"Now, talking about props take a look at the following block of code.",{"type":17,"tag":59,"props":60,"children":65},"pre",{"className":61,"code":63,"language":64,"meta":8},[62],"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",[66],{"type":17,"tag":67,"props":68,"children":69},"code",{"__ignoreMap":8},[70],{"type":23,"value":63},{"type":17,"tag":37,"props":72,"children":74},{"id":73},"declaring-props-in-vuejs",[75],{"type":23,"value":76},"Declaring Props in Vue.js",{"type":17,"tag":26,"props":78,"children":79},{},[80,82,88,90,96],{"type":23,"value":81},"In Vue.js, props are declared in the child component's ",{"type":17,"tag":67,"props":83,"children":85},{"className":84},[],[86],{"type":23,"value":87},"script",{"type":23,"value":89}," block using the ",{"type":17,"tag":67,"props":91,"children":93},{"className":92},[],[94],{"type":23,"value":95},"defineProps",{"type":23,"value":97}," macro. Here's a simple example:",{"type":17,"tag":59,"props":99,"children":104},{"className":100,"code":102,"language":103,"meta":8},[101],"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",[105],{"type":17,"tag":67,"props":106,"children":107},{"__ignoreMap":8},[108],{"type":23,"value":102},{"type":17,"tag":37,"props":110,"children":112},{"id":111},"using-the-component-with-props",[113],{"type":23,"value":114},"Using the Component with Props",{"type":17,"tag":26,"props":116,"children":117},{},[118,120,126,128,134],{"type":23,"value":119},"lets use the ",{"type":17,"tag":67,"props":121,"children":123},{"className":122},[],[124],{"type":23,"value":125},"Text.vue",{"type":23,"value":127}," component in our ",{"type":17,"tag":67,"props":129,"children":131},{"className":130},[],[132],{"type":23,"value":133},"Parent.vue",{"type":23,"value":135}," component:",{"type":17,"tag":59,"props":137,"children":140},{"className":138,"code":139,"language":103,"meta":8},[101],"\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",[141],{"type":17,"tag":67,"props":142,"children":143},{"__ignoreMap":8},[144],{"type":23,"value":139},{"type":17,"tag":26,"props":146,"children":147},{},[148],{"type":23,"value":149},"if you want to bind the message prop to some ref in the parent component",{"type":17,"tag":59,"props":151,"children":154},{"className":152,"code":153,"language":103,"meta":8},[101],"\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",[155],{"type":17,"tag":67,"props":156,"children":157},{"__ignoreMap":8},[158],{"type":23,"value":153},{"type":17,"tag":26,"props":160,"children":161},{},[162,164,170,172,178,180,185,187,192,194,200],{"type":23,"value":163},"with that your ",{"type":17,"tag":67,"props":165,"children":167},{"className":166},[],[168],{"type":23,"value":169},"message",{"type":23,"value":171}," prop is now bound to the ",{"type":17,"tag":67,"props":173,"children":175},{"className":174},[],[176],{"type":23,"value":177},"name",{"type":23,"value":179}," ref, whenever the ",{"type":17,"tag":67,"props":181,"children":183},{"className":182},[],[184],{"type":23,"value":177},{"type":23,"value":186}," ref updates, your ",{"type":17,"tag":67,"props":188,"children":190},{"className":189},[],[191],{"type":23,"value":169},{"type":23,"value":193}," prop will update and hence the ",{"type":17,"tag":67,"props":195,"children":197},{"className":196},[],[198],{"type":23,"value":199},"\u003CText/>",{"type":23,"value":201}," component would re-render.",{"title":8,"searchDepth":203,"depth":203,"links":204},2,[205,206,207,208],{"id":11,"depth":203,"text":41},{"id":49,"depth":203,"text":52},{"id":73,"depth":203,"text":76},{"id":111,"depth":203,"text":114},"markdown","content:blogs:what-are-props.md","content","blogs/what-are-props.md","md",1706958662230]