Introduce

• Vuejs is a very powerful and popular framework currently used for frontend development. And when mentioning Vuejs, people often mention one of its most characteristic things: the Vue Component.
• So today, I will introduce to you the most basic knowledge about Vue Component so that you can easily apply it to the project you are doing!

What is Vue Component?

• A component is a block consisting of a group of code related to an object and all event handlers, changing the value on that object, which can be reused without rewriting the code. In addition, it also helps to manage code, maintain, repair code easier, more readable code.
• Here to understand more about the use of the Component we try to see an example below:

Component example

• Components can be used by naming, in the case of <button-counter>. You can use the component as an element in the Vue instance:

• And this is the result

Component reuse

• Component can be reused many times if you want just by renaming the component.

Data in component must be function.

• When you notice it, the data in the vue instance will look like:

• And in Vue Conponent:

• The reason for this difference is due to the reuse of the component. If we declare the data in the component as in the vue instance, when we reuse multiple components, when the data changes, all the components will change. For example:

• The result will look like this:

  

Organization components

• Structuring an app into a component tree is very common.

  

• For example, you have components for 1 header, siderbar, content, etc. Each type usually contains other components for navigation links, blog posts, etc.
• To use those components in templates, they must be registered so that Vue knows about them. There are 2 types of component registration: global and local. Usually we usually register components in a global style using Vue.component:

• Registration of components in a global style can be used in any Vue instance created later.

Pass data to child components with props.

• In the previous section, we mentioned creating 1 components for blog posts. The problem is, that component is useless if you don’t pass data to it, such as the title, the post content.
• Props are 1 attributes you can register in one component. When a value is passed into the prop, it becomes a value in that component. To pass a title to your blog post, you must pass it into the component prop.

• Once the prop is registered, you can pass values ​​to it as follows:

• Result:

  

• If you have an array of posts in the data:

• And you want to render a component with foreach to render all the posts

A Single Root Element

• When creating a <blog-post> component, your template will contain more than just the title:

• At least you’ll want to include the post content as well:

• If you try to do this, Vue will display an error, because each component has only one root element. You can fix this error by:

• But when we not only need to display each title, the content of the post but also the public date, comment, and so on, the prop definition for each information will be very lengthy. For example:

• Instead, we can structure the component as follows:

• And then our code will be as follows:

Listening to events from child components

• When developing, there will be some features that require communication with the parent component. For example, if you want a feature that allows you to enlarge the text of your blog post, while other elements will remain the same size. The Vue component provides us with an emit function that allows us to pass events from child components to parent components. Apply as follows: