Join Michael Sullivan for an in-depth discussion in this video Using Vue components, part of Learning Vue.js.
- [Instructor] In this video, we're gonna take a short break from writing code while I introduce the topic of components in Vue. So first, what do Vue components look like? These are very similar to basic Vue instances, except they have their own markup that's included using a custom element that we insert into our document. So there's no L property for a selector. Here's an example. By calling Vue dot component, we can register a component with the tag name my-component. Then we can use it on our page, like this.
One way to define how a component is rendered is with the template option. And you can see that here This is just a useless component because all it does is render that div. So all of this is quite a lot of effort just to get a div to render. But of course, we can do more than that. I said that a component is basically like a Vue instance. It has its own data, but a very important difference is that instead of just an object, the value provided for the data option must be a function.
And here you can see that this function just returns an object that looks like the data object in a normal Vue instance. And we can use it the same way. Here we have a value for sku that's inserted with string interpolation into the template. And the reason we use a function is so that if we wanna reuse this component more than once on a single page, each instance can have its own data that can change independently. Next, data can be made available to a component using attributes called props.
So here you see that when sku is defined as a prop, we can pass it in as an attribute in the markup. And now you can start to get an idea of how we could reuse this component to generate unique elements on a page. And we'll also see how we can make this dynamic, which is really the same way we make any attribute dynamic, with v-bind or the colon shorthand. Finally, if you're using a build tool, or a module bundler like Browserfy, Webpack, Parcel, or Rollup, you can actually create what are known as single-file components, stored in dot vue files, which look very similar to HTML files.
So why do we need all this stuff? We've touched on this a little bit, but one big reason is reusability. It's easy to create custom elements that you can use anywhere in your applications, or even across applications. This goes along with encapsulation and portability. It's by packaging the component's appearance and behavior into that single custom tag that I'm able to reuse it, or move it, without worrying as much about breaking something or forgetting to copy and paste something. All of this helps me to stay organized and to make my markup easier to read, because I can just replace an element and all of its children with a single custom element and not be distracted by all the details inside every time I'm looking at markup that includes it.
So let's see some simple components in action next.
- Adding Vue to a webpage
- Thinking declaratively with data binding
- Methods and event handling
- Adding dynamic style and class attributes
- Using CSS transitions and animations
- Using Vue components
- Vue CLI