Vue comes with two different ways of storing variables, and . props data These can be confusing at first, since they seem like they do similar things, and it’s not clear when to use one vs the other. So what’s the between props and data? difference **Data** is the private memory of each component where you can store any variables you need. Props are how you pass this data from a parent component down to a child component. In this article you’ll learn: What props are, and why , not up this data only flows down What the option is used for data What is reactivity How to avoid between props and naming collisions data How to use for fun and profit 💰 props and data together What are props? In Vue, (or properties), are the way that we pass data from a parent down to it’s child components. props component When we build our applications out of components, we end up building a . Similar to a family tree, you have: data structure called a tree parents children ancestors and descendants Data flows down this tree from the root component, the one at the very top. Sort of like how genetics are passed down from one generation to the next, . parent components pass props down to their children In Vue we add props to components in the section of our code: <template> <template> <my-component cool-prop="hello world"></my-component></template> In this example, we are passing the prop a value of . We will be able to access this value from inside of . cool-prop "hello world" my-component However, when we access props from inside of a component, we don’t own them, (just like you can’t change the genes your parents gave you). so we can’t change them Note: While it’s possible to change properties in a component, it’s a really bad idea. You end up changing the value that the parent is using as well, which can cause lots of confusion. But if we can’t change variables, we’re kind of stuck. This is where comes in! data What is data? is the of each component. This is where you would store data (hence the name), and any other variables you want to track. Data memory If we were building a counter app, we would need to keep track of the count, so we would add a to our : count data <template> <div> {{ count }} <button @click="increment">+</button> <button @click="decrement">-</button> </div></template> <script>export default { name: 'Counter', data() { return { count: 0, }; }, methods: { increment() { this.count += 1; }, decrement() { this.count -= 1; } }}</script> This data is private, and to use. Other components do not have access to it. only for the component itself Note: Again, it is possible for other components to access this data, but for the same reasons, it’s a really bad idea to do this! If you need to pass data to a component, you can use props to pass data down the tree (to child components), or events to pass data up the tree (to parent components). Props and data are both reactive With Vue you don’t need to think all that much about when the component will update itself and render new changes to the screen. This is because Vue is reactive. Instead of calling every time you want to change something, you just change the thing! As long as you’re updating a (props, computed props, and anything in ), Vue knows to watch for when it changes. setState reactive property data Going back to our counter app, let’s take a closer look at our methods: methods: { increment() { this.count += 1; }, decrement() { this.count -= 1; }} All we have to do is update , and Vue detects this change. It then re-renders our app with the new value! count Vue’s reactivity system has a lot more nuance to it, and I believe it’s really important to understand it well if you want to be highly productive with Vue. Here are about Vue’s reactivity system if you want to dive deeper. some more things to learn Avoiding naming collisions There is another great thing that Vue does that makes developing . just a little bit nicer Let’s define some props and data on a component: export default { props: ['propA', 'propB'], data() { return { dataA: 'hello', dataB: 'world', }; }}; If we wanted to access them inside of a method, we don’t have to do or . Vue let’s us omit and completely, leaving us with cleaner code. this.props.propA this.data.dataA props data We can access them using or : this.propA this.dataA methods: { coolMethod() { console.log(this.propA); console.log(this.dataA); }} Because of this, if we accidentally use the same name in both our and our , we can run into issues. props data Vue will give you a warning if this happens, because it doesn’t know which one you wanted to access! export default { props: ['secret'], data() { return { secret: '1234', }; }, methods: { printSecret() { console.log(this.secret); } }}; The real magic of using Vue happens when you start using props and together. data Using props and data together Now that we’ve seen how props and data are different, let’s see why , by building a basic app. we need both of them Let’s say we are building a social network and we’re working on the profile page. We’ve built out a few things already, but now we have to add the contact info of the user. We’ll display this info using a component called : ContactInfo // ContactInfo<template> <div class="container"> <div class="row"> Email: {{ emailAddress }} Twitter: {{ twitterHandle }} Instagram: {{ instagram }} </div> </div></template> <script>export default { name: 'ContactInfo', props: ['emailAddress', 'twitterHandle', 'instagram']};</script> The component takes the props , , and , and displays them on the page. ContactInfo emailAddress twitterHandle instagram Our profile page component, , looks like this: ProfilePage // ProfilePage<template> <div class="profile-page"> <div class="avatar"> <img src="user.profilePicture" /> {{ user.name }} </div> </div></template> <script>export default { name: 'ProfilePage', data() { return { user: { name: 'John Smith', profilePicture: './profile-pic.jpg', emailAddress: 'john@smith.com', twitterHandle: 'johnsmith', instagram: 'johnsmith345', }, } }};</script> Our component currently displays the users profile picture along with their name. It also has the user data object. ProfilePage How do we get that data from the parent component ( ) down into our child component ( )? ProfilePage ContactInfo We have to pass down this data using props. First we need to import our component into the component: ContactInfo ProfilePage <script>import ContactInfo from './ContactInfo.vue'; export default { name: 'ProfilePage', components: { ContactInfo, }, data() { return { user: { name: 'John Smith', profilePicture: './profile-pic.jpg', emailAddress: 'john@smith.com', twitterHandle: 'johnsmith', instagram: 'johnsmith345', }, } }};</script> Second, we have to add in the component to our section: <template> // ProfilePage<template> <div class="profile-page"> <div class="avatar"> <img src="user.profilePicture" /> {{ user.name }} </div> <contact-info :email-address="user.emailAddress" :twitter-handle="user.twitterHandle" :instagram="user.instagram" /> </div></template> Now all the user data that needs will flow down the component tree and into from the ! ContactInfo ContactInfo ProfilePage The reason we keep the data in and not is that other parts of the profile page need access to the user object. ProfilePage ContactInfo Since , this means we have to put our data high enough in the component tree so that it can flow down to all of the places it needs to go. data only flows down If you enjoyed this article or have any comments, let me know by replying to this tweet ! Originally published at michaelnthiessen.com .
