How to use components in Vue? Is it difficult ???

Tram Ho

1, What are Components.

Component is one of the most important features in VueJS . It helps us to inherit HTML elements, can reuse the code, helping our code look concise, cleaner. The code we can declare in a component will be HTML , CSS or Javascript , they are encapsulated into a component and then we can call the component and reuse them.

2, Declare a Component

There are many ways to declare a component , I would like to introduce you to a few ways as follows:

Method 1: This is a way to declare a component , this is often called a string template . The html code will be declared in the template: ' ... '


You can reuse component by declaring multiple hello-world .

For more complex, longer code that you want to write in the template , use template literals , they allow you to write code on multiple lines and will be easier to read for example:

Option 2: This is probably the most common way I think many people will apply the most is the single-file component . When we have a large system combining many files together, each component will be separated one .vue file, this will help us more easily control the code as well as maintain or clean the code.

The naming of component files should be in PascalCase (capitalized with the first letter) or kebab-case (all lowercase and hyphenated – between words). For example


A file components will have 3 parts: HTML , CSS , javascript written separately each part assuming the following:

Method 3: Use Inline Templates , this way, you will define the template after registering a component by using the inline-template attribute.

In addition, we have a few other ways to declare such as using x-templates , render function or JSX . You can find out more on the Vue homepage.

3, Use the data method

data in component has two types: chia sẻ dữ liệu chung and không chia sẻ dữ liệu chung . To make it easier to understand, I will go into the example. The first is with the case of chia sẻ dữ liệu chung .

The resulting interface will be:

Explain a little bit why I built like this, because to know whether the data in the component is chia sẻ chung dữ liệu or not, when we click on any change button to change the value of name , but in all other component affected by data changes, we can understand that this data is being shared data and this data is used in all component . When you run the above code, you will see that the value of the name in the component are changed. As the gif below

As above, we return the data declared outside and then return that result in the data . Now if you want to when you click a certain button, only the data in that component will be changed, you should return an object in the data as follows:

Result :

You have seen that when we click on a component ‘s button , only the data in that component changes, this is called the không chia sẻ dữ liệu chung .

Please note: In the chia sẻ dữ liệu chung example, in the change method , , this is the data variable that is declared outside. Also in the case of dữ liệu không được chia sẻ chung it in then this is the component that you are performing an action on component that it knew that the data in component have been modified.

Note that the data in the component must be a function and return an object. This is the way that component control of key data component so that the data không bị chia sẻ chung .

If you intentionally declare data not a function like:

then you will immediately receive an error message as data property in component must be a function . In Vue ‘s style guide , you are encouraged to declare the following

4, Active area of ​​components.

There are two types of components operations: global and local .

Global Component:

For global component , we can use them anywhere in a certain Vue instance . Taking the example above, we have:

The output you can see in #app2 can also use the component we declared without any problems at all.

Local Component:

If now you do not want your component to be used in all Vue instance but only in a Vue instance , then how, now is the time to use the local component .

Unlike the above, we will not register the component directly by declaring Vue.component anymore, instead we define a component as an object as follows:

Then to use this component in the Vue instance we need to declare as follows:

then called as usual.

If intentionally declared a component in a Vue instance without registering to use that component , we will not get any results =)).

5, Communication between components

I told you to ask a question now, is there any way for 2 components to be able to interact with each other, if yes or no, please read on this part of me =)). Surely anyone who has exposed Vue will sometimes use this component in another component . This is called a subcomponent and often people will say it in a way that is easily understood as a cha-con relationship.

The image above describes how the components communicate with each other, looking very understandable. When you want to pass data from a component cha component con , you will use props . If you want to transfer data from a component con component cha , use events .

Let’s first learn how to transfer data from a parent component to a child component .

Suppose we have 2 components as follows:

Dashboard.vue ( Component parent )

HelloWorld.vue ( Component child )

Above in the parent component Dashboard I want to pass a variable down to the child component HelloWorld and print the value of the message . We will have two ways to transfer data, 1 is static props 2 is dynamic props . If for static props you simply pass the value of the variable to the child component and that value will not change we will do the following:

And if you want to pass the dynamic props , then do as I was on it

with message defined in the script , this type of transfer will be more dynamic, ie when the value of the message in the component cha is changed, that value in the component con will also be updated accordingly.

In addition, you can transfer data in many different data types such as string , object , array , number , boolean or even object properties . Here I just made a simple example easy to understand so that those who have just learned can easily understand it.

Next is to get the data of the component cha component child component , we use props to receive. If we simply don’t want to delineate the data types or values ​​that the component cha passed down, we just need to.

If we want the data type of the props to be taken as a string we do the following:

we can even validate data transmitted, to learn more, you can go to Vue’s document to read.

Transfer data from child component to parent component

Enter the example to make it easy to understand, suppose we have 2 component as follows. Suppose, we have a profile page when clicking on the button will change the username .

AccountInfo.vue ( child component )

First click the button to change the username , it will call the function changeUsername() , in this method we will use $emit to broadcast the event with the event name used here is changeUsername .

Continuing, in the component cha will receive sự kiện in the component con passed by the syntax type @<Tên sự kiện của con gửi lên>=<Hàm xử lý ở cha> .

Account.vue ( Component father )

Here from me because it is a simple example to change the name, so I handle directly in the call to the component con

If the internal processing is a bit confusing you should put it into a methods and then handle, for example:

Then in the script you handle the following:


This is what I want to share with you in this article, if there is anything wrong or suggestions as well as asking questions you can comment below for us to discuss offline =))

Share the news now

Source : Viblo