Where Do You Add Props To Taxes For Photography

by -38 views

Editor’due south note: This Vue tutorial was updated on 1/xv/2021

In this post, we will wait at how data can be passed from a parent component to child components in Vue.js.

Prerequisites for using props in Vue

This postal service is suited for developers of all stages including beginners. Here are a few things you should already have before going through this article.

You will need the following on your pc:

  • Node.js version 10.x and in a higher place installed. You tin can verify if already have it installed past running the control below in your terminal/command prompt:
node -v
  • A code editor: Visual Studio Code is highly recommended
  • Vue’s latest version, installed globally on your motorcar
  • Vue CLI three.0 installed on your machine. To do this, uninstall the old CLI version starting time:
npm uninstall -chiliad vue-cli

then install the new one:

npm install -g @vue/cli
  • Download a Vue starter project hither
  • Unzip the downloaded project
  • Navigate into the unzipped file and run the command to go on all the dependencies upward-to-date:
npm install

What are props?

Outset off, let’s define props. The Vue team provides what they call props which are custom attributes y’all can register on whatever component. The way information technology works is that you define your data on the parent component and give it a value, then you go to the kid component that needs that data and pass the value to a prop attribute so the information becomes a property in the child component.

The syntax looks like this:

Vue.component('blog-post', {   props: ['title'],   template: '<h3>{{ championship }}</h3>' })

You can use the root component (App.vue) equally the parent component and store the data and so register props to access this data dynamically from any component that needs it.

Why should you use props?

Why should you use props, you ask? If you lot have a information object (say, of the Billboard top 10 artists list) you want to brandish in ii different components but in very different ways, the beginning instinct will be to create these ii carve up components, add the array within the information object and then brandish them in the template.

This solution is great but every bit you add more than components, information technology becomes a not-efficient solution. Allow us demonstrate this with the starter projection you have opened in VS Code.

Open the test.vue file and copy in this code block below:

<template>   <div>     <h1>Vue Meridian 20 Artists</h1>     <ul>       <li 5-for="(creative person, ten) in artists" :key="x">       <h3>{{artist.name}}</h3>       </li>     </ul>   </div> </template> <script> export default {   name: 'Test',   data (){     return {       artists: [        {name: 'Davido', genre: 'afrobeats', land: 'Nigeria'},        {name: 'Burna Boy', genre: 'afrobeats', land: 'Nigeria'},        {name: 'AKA', genre: 'hiphop', country: 'South-Africa'},        {name: 'Sarkodie', genre: 'hiphop', country: 'Ghana'},        {name: 'Stormzy', genre: 'hiphop', country: 'United Kingdom'},        {name: 'Lil Nas', genre: 'Country', land: 'The states'},        {name: 'Nasty C', genre: 'hiphop', country: 'South-Africa'},        {name: 'Shatta-walle', genre: 'Reagae', country: 'Ghana'},        {name: 'Khalid', genre: 'popular', country: 'U.s.a.'},        {name: 'ed-Sheeran', genre: 'pop', country: 'United Kingdom'}       ]     }   } } </script>

Create a new file in the components folder, call it test2.vue and paste the lawmaking block below inside information technology:

<template>   <div>     <h1>Vue Tiptop Artist Countries</h1>     <ul>       <li v-for="(artist, x) in artists" :key="ten">       <h3>{{artist.name}} from {{artist.country}}</h3>       </li>     </ul>   </div> </template> <script> consign default {   name: 'Test2',   data (){     return {       artists: [        {name: 'Davido', genre: 'afrobeats', state: 'Nigeria'},        {name: 'Burna Boy', genre: 'afrobeats', country: 'Nigeria'},        {name: 'AKA', genre: 'hiphop', country: 'S-Africa'},        {proper name: 'Sarkodie', genre: 'hiphop', country: 'Ghana'},        {name: 'Stormzy', genre: 'hiphop', country: 'United Kingdom'},        {name: 'Lil Nas', genre: 'Country', country: 'The states'},        {name: 'Nasty C', genre: 'hiphop', country: 'South-Africa'},        {proper name: 'Shatta-walle', genre: 'Reagae', country: 'Republic of ghana'},        {name: 'Khalid', genre: 'pop', land: 'United States'},        {name: 'ed-Sheeran', genre: 'pop', country: 'United Kingdom'}       ]     }   } } </script> <style scoped> li{     height: 40px;     width: 100%;     padding: 15px;     border: 1px solid saddlebrown;     display: flex;     justify-content: centre;     align-items: center;   }   a {   colour: #42b983; } </fashion>

To annals the new component you lot just created, open up the App.vue file and copy the code below inside it:

<template>   <div id="app">     <img alt="Vue logo" src="./assets/logo.png">     <Test/>     <test2/>   </div> </template> <script> import Test from './components/Exam.vue' import Test2 from './components/Test2' export default {   name: 'app',   components: {     Examination, Test2   } } </script>

Serve up the application in the development surround with this command in the VS Code final:

npm run serve

Information technology should look like this:

You see that if you had nigh v more than components, y’all will have to continue copying the data in every component. Imagine if in that location is a way you tin ascertain the data in a parent component and so bring it into every child component that needs information technology with the property name.

Defining information in the parent component

As yous take chosen the root component to be your parent component, you have to beginning define the information object you want to share dynamically inside the root component. If you lot have followed this mail from the start, open up your app.vue file and re-create the data object lawmaking block within the script section:

<script> import Examination from './components/Test.vue' import Test2 from './components/Test2' export default {   proper name: 'app',   components: {     Test, Test2   },   data (){     return {       artists: [        {proper name: 'Davido', genre: 'afrobeats', country: 'Nigeria'},        {name: 'Burna Boy', genre: 'afrobeats', country: 'Nigeria'},        {proper name: 'AKA', genre: 'hiphop', country: 'Southward-Africa'},        {name: 'Sarkodie', genre: 'hiphop', country: 'Ghana'},        {name: 'Stormzy', genre: 'hiphop', country: 'U.k.'},        {name: 'Lil Nas', genre: 'Country', country: 'United states of america'},        {name: 'Nasty C', genre: 'hiphop', country: 'South-Africa'},        {name: 'Shatta-walle', genre: 'Reagae', state: 'Ghana'},        {proper name: 'Khalid', genre: 'pop', land: 'United States'},        {proper noun: 'Ed Sheeran', genre: 'pop', country: 'United Kingdom'}       ]     }   } } </script>

Receiving props in Vue

After defining the data, become into the two test components and delete the data objects in them. To receive props in a component, you lot have to specify the props yous desire to receive inside that component. Go inside the ii test components and add the specifications in the script section as shown below:

<script> consign default {   name: 'Examination',   props: ['artists'] }

Registering props in Vue

To allow the Vue engine know that you accept some props you will want to dynamically laissez passer to some child components, yous accept to indicate it in the Vue instance. This is washed in the template section like this:

<template>   <div id="app">     <img alt="Vue logo" src="./assets/logo.png">     <Exam v-bind:artists="artists"/>     <test2 v-bind:artists="artists"/>   </div> </template>

Here, nosotros apply the v-bind directive to bind artists which is the proper noun of the data object array downwards in the script section and artists which is the prop name in the test components, the 1 you set upwardly in the department above. In this case, where y’all ready it up without the directive like this:

        <Test artists="artists"/>     <test2 artists="artists"/>

Y’all volition not run across whatever output and Vue compiler or even ESLint volition not flag information technology every bit an fault or warning, and then it is important y’all pay attending and remember to use 5-bind for every dynamic binding.

Using props in Vue

After you have set upwardly the props, yous can then use it within your component as though the data was defined inside the aforementioned component. This means you can ready up method calls and easily admission
in our demo example.

Strongly typing props

You can also ensure that your component only receives exactly the information type y’all want information technology to receive by strongly typing the props. In our demo, for instance, you tin ensure that it is simply arrays that get passed down to your component by setting up hallmark similar this:

<script> export default {   proper noun: 'Test',   props: {     artists: {       blazon: Array     }   } } </script>

So whenever you lot add together a wrong type say String, you will get a warning in the panel telling you that the type it got is not the blazon it expected.

unexpected type error using props in Vue

Y’all can get the consummate code to this tutorial hither.


In this post, we looked at Vue props and how they can help to encourage the DRY (don’t repeat yourself) approach past creating a platform for reusability of data objects. We have likewise learned how to set upwards props in your Vue project. For additional data, check out Vue’s official documentation on props. Happy hacking!

Experience your Vue apps exactly how a user does

Debugging Vue.js applications can be difficult, especially when there are dozens, if not hundreds of mutations during a user session. If yous’re interested in monitoring and tracking Vue mutations for all of your users in production, try LogRocket.
LogRocket Dashboard Free Trial Bannerhttps://logrocket.com/signup/

LogRocket is like a DVR for web and mobile apps, recording literally everything that happens in your Vue apps including network requests, JavaScript errors, performance problems, and much more. Instead of guessing why problems happen, you tin aggregate and written report on what country your awarding was in when an outcome occurred.

The LogRocket Vuex plugin logs Vuex mutations to the LogRocket console, giving yous context effectually what led to an error, and what state the application was in when an event occurred.

Modernize how you lot debug your Vue apps – Start monitoring for free.

Source: https://blog.logrocket.com/how-to-use-props-to-pass-data-to-child-components/

Posted by: Fusiontr.com