It is incredibly common to re-use complex elements throughout a front-end web app. For example, every post on Instagram or Facebook needs to look the same but contain different information. Additionally, they need to look the same on many different pages within the site and on many different devices. To make this easier, Vue has added the ability to create custom, reusable HTML elements called components.
When creating a component, you provide a template that should be rendered whenever the component is used in HTML. You then specify which pieces of dynamic information, called props, the component can receive to fill in this template. When used in your HTML code, props look like normal HTML attributes, you add them to the opening tag of the component HTML element with a name and a value.
Once you’ve created your component, you can then use it throughout your site just like any other HTML element. This means no copy/pasting of HTML code, no need to make the same change in multiple places across your site, and no potentially broken or misstyled elements.
Knowing how and when to make components is a slightly more advanced topic, so we won’t cover it in depth. However, that doesn’t mean we can’t play around with them right now. Let’s check one out!
Instructions
In the future, we will likely need to display our tweets in many different sections of our site. To make this task easier and less prone to errors, we’ve created a tweet component to be used throughout the site.
In Tweet.js, you’ll see the code to create a new component called tweet that takes in a prop called message and displays it using the supplied template. Much like with a Vue app, all of this information is passed in as an options object.
You’ll notice that the username in the template is still hard-coded as CoderInTraining. Let’s change this so that the author can also be provided as a prop.
First, add 'author' to the props array so that our component can accept the username of the tweet’s author as a prop.
Next, let’s update the component’s template to use the passed-in value of author.
Replace CoderInTraining in the component’s template with a mustache expression that will evaluate to author.
Finally, let’s pass in the value of data‘s username to the author prop on our component using the v-bind directive.
v-bind takes a value from the Vue app’s data object and uses it as the value of the specified component prop.
You can see an example of this on line 27 of index.html. We use v-bind to set the value of message on the tweet component instance, <tweet>, to be the Vue app data‘s value of tweet.
The name of the value after the : is the prop that will be receiving the value. The value of v-bind (the name in quotes) is the data value we will be using to set that prop’s value.
In index.html, add a v-bind directive to our <tweet> element that passes in the value of data‘s username as author. This should look very similar to the other v-bind expression on the element.