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: ' ... '
1 2 3 4 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> app <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> hello-world</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> hello-world</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <span class="token comment">// js</span> Vue <span class="token punctuation">.</span> <span class="token function">component</span> <span class="token punctuation">(</span> <span class="token string">'hello-world'</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token function-variable function">data</span> <span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">{</span> name <span class="token operator">:</span> <span class="token string">'Quang Phu'</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> template <span class="token operator">:</span> <span class="token string">'<h1>Hello {{ name }}</h1>'</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> el <span class="token operator">:</span> <span class="token string">"#app"</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
Result
1 2 | Hello Quang Phu |
You can reuse component
by declaring multiple hello-world
.
1 2 3 4 5 6 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> app <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> hello-world</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> hello-world</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> hello-world</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> hello-world</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> hello-world</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> hello-world</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> |
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:
1 2 3 4 5 6 7 | template: ` <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> blog-post <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> h3</span> <span class="token punctuation">></span></span> Hello <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> h3</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token punctuation">></span></span> Cảm ơn các bạn đã đọc bài viết của mình, tặng mình một upvote nehs <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> ` |
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 inPascalCase
(capitalized with the first letter) orkebab-case
(all lowercase and hyphenated – between words). For example
DefaultAvatar.vue
or
default-avatar.vue
A file components
will have 3 parts: HTML
, CSS
, javascript
written separately each part assuming the following:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> template</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> binding-data <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> {{msg}} <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> template</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> script</span> <span class="token punctuation">></span></span> <span class="token script"><span class="token language-javascript"> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> name <span class="token operator">:</span> <span class="token string">'HelloWorld'</span> <span class="token punctuation">,</span> <span class="token function">data</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">{</span> msg <span class="token operator">:</span> <span class="token string">'Welcome to Your Vue.js App'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> script</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> style</span> <span class="token attr-name">scoped</span> <span class="token punctuation">></span></span> <span class="token style"><span class="token language-css"> <span class="token selector">h1, h2</span> <span class="token punctuation">{</span> <span class="token property">font-weight</span> <span class="token punctuation">:</span> normal <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">ul</span> <span class="token punctuation">{</span> <span class="token property">list-style-type</span> <span class="token punctuation">:</span> none <span class="token punctuation">;</span> <span class="token property">padding</span> <span class="token punctuation">:</span> 0 <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">li</span> <span class="token punctuation">{</span> <span class="token property">display</span> <span class="token punctuation">:</span> inline-block <span class="token punctuation">;</span> <span class="token property">margin</span> <span class="token punctuation">:</span> 0 10px <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">a</span> <span class="token punctuation">{</span> <span class="token property">color</span> <span class="token punctuation">:</span> #42b983 <span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> style</span> <span class="token punctuation">></span></span> |
Method 3: Use Inline Templates
, this way, you will define the template
after registering a component
by using the inline-template
attribute.
1 2 3 4 5 6 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> app <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> my-template</span> <span class="token attr-name">inline-template</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> p</span> <span class="token punctuation">></span></span> Hello {{ name }} <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> p</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> my-template</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> |
1 2 3 4 5 6 7 8 9 10 11 12 | Vue <span class="token punctuation">.</span> <span class="token function">component</span> <span class="token punctuation">(</span> <span class="token string">'my-template'</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token function">data</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">{</span> name <span class="token operator">:</span> <span class="token string">'Phu'</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> el <span class="token operator">:</span> <span class="token string">"#app"</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
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
.
1 2 3 4 5 6 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> app <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> hello-world</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> hello-world</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> hello-world</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> hello-world</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> hello-world</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> hello-world</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <span class="token keyword">var</span> data <span class="token operator">=</span> <span class="token punctuation">{</span> name <span class="token operator">:</span> <span class="token string">'Quang Phu'</span> <span class="token punctuation">}</span> Vue <span class="token punctuation">.</span> <span class="token function">component</span> <span class="token punctuation">(</span> <span class="token string">'hello-world'</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token function">data</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> data <span class="token punctuation">}</span> <span class="token punctuation">,</span> template <span class="token operator">:</span> <span class="token string">'<h1>Hello {{ name }}<br><button @click="change">Change</button></h1>'</span> <span class="token punctuation">,</span> methods <span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token function">change</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> name <span class="token operator">=</span> <span class="token string">'Torres'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> el <span class="token operator">:</span> <span class="token string">"#app"</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | Vue <span class="token punctuation">.</span> <span class="token function">component</span> <span class="token punctuation">(</span> <span class="token string">'hello-world'</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token function">data</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">{</span> name <span class="token operator">:</span> <span class="token string">'Quang Phu'</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> template <span class="token operator">:</span> <span class="token string">'<h1>Hello {{ name }}<br><button @click="change">Change</button></h1>'</span> <span class="token punctuation">,</span> methods <span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token function">change</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> name <span class="token operator">=</span> <span class="token string">'Torres'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> el <span class="token operator">:</span> <span class="token string">"#app"</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
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.name
, 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 this.name
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 thecomponent
must be a function and return an object. This is the way thatcomponent
control of key datacomponent
so that the datakhông bị chia sẻ chung
.
If you intentionally declare data
not a function
like:
1 2 3 4 | data <span class="token operator">:</span> <span class="token punctuation">{</span> name <span class="token operator">:</span> <span class="token string">'Quang Phu'</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | Vue <span class="token punctuation">.</span> <span class="token function">component</span> <span class="token punctuation">(</span> <span class="token string">'some-comp'</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token function-variable function">data</span> <span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">{</span> foo <span class="token operator">:</span> <span class="token string">'bar'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token comment">//hoặc là</span> <span class="token comment">// In a .vue file</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> <span class="token function">data</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">{</span> foo <span class="token operator">:</span> <span class="token string">'bar'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
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:
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> app <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> hello-world</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> hello-world</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> hello-world</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> hello-world</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> hello-world</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> hello-world</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> app2 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> hello-world</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> hello-world</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> hello-world</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> hello-world</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> hello-world</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> hello-world</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | Vue <span class="token punctuation">.</span> <span class="token function">component</span> <span class="token punctuation">(</span> <span class="token string">'hello-world'</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token function">data</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">{</span> name <span class="token operator">:</span> <span class="token string">'Quang Phu'</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> template <span class="token operator">:</span> <span class="token string">'<h1>Hello {{ name }}</h1>'</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> el <span class="token operator">:</span> <span class="token string">"#app"</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> el <span class="token operator">:</span> <span class="token string">"#app2"</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
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:
1 2 3 4 5 6 7 8 9 10 11 | <span class="token keyword">var</span> componentdefinded <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token function">data</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">{</span> name <span class="token operator">:</span> <span class="token string">'Quang Phu'</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> template <span class="token operator">:</span> <span class="token string">'<h1>Hello {{ name }}</h1>'</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span> |
Then to use this component
in the Vue instance
we need to declare as follows:
1 2 3 4 5 6 7 8 | <span class="token keyword">new</span> <span class="token class-name">Vue</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> el <span class="token operator">:</span> <span class="token string">"#app"</span> <span class="token punctuation">,</span> components <span class="token operator">:</span> <span class="token punctuation">{</span> hello <span class="token operator">-</span> world <span class="token operator">:</span> componentdefinded <span class="token punctuation">,</span> <span class="token comment">// đăng ký sử dụng component dưới tên component là hello-world.</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
then called as usual.
1 2 3 4 5 6 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> app <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> hello-world</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> hello-world</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> hello-world</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> hello-world</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> hello-world</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> hello-world</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> |
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 )
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> template</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> app <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> img</span> <span class="token attr-name">alt</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Vue logo <span class="token punctuation">"</span></span> <span class="token attr-name">src</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> ./assets/logo.png <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> HelloWorld</span> <span class="token attr-name">:message</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> message <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> template</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> script</span> <span class="token punctuation">></span></span> <span class="token script"><span class="token language-javascript"> <span class="token keyword">import</span> HelloWorld <span class="token keyword">from</span> <span class="token string">'./components/HelloWorld.vue'</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> components <span class="token operator">:</span> <span class="token punctuation">{</span> HelloWorld <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token function">data</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">{</span> message <span class="token operator">:</span> <span class="token string">'Xin chao tat ca moi nguoi'</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> script</span> <span class="token punctuation">></span></span> |
HelloWorld.vue
( Component child )
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> template</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> hello <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> h1</span> <span class="token punctuation">></span></span> {{ message }} <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> h1</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> template</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> script</span> <span class="token punctuation">></span></span> <span class="token script"><span class="token language-javascript"> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> props <span class="token operator">:</span> <span class="token punctuation">{</span> message <span class="token operator">:</span> <span class="token punctuation">{</span> type <span class="token operator">:</span> String <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> script</span> <span class="token punctuation">></span></span> |
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:
1 2 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> HelloWorld</span> <span class="token attr-name">message</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Xin chào tất cả các bạn <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> |
And if you want to pass the dynamic props
, then do as I was on it
1 2 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> HelloWorld</span> <span class="token attr-name">:message</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> message <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> |
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.
1 2 | props <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">'message'</span> <span class="token punctuation">]</span> |
If we want the data type of the props
to be taken as a string
we do the following:
1 2 3 4 5 6 | props: { message: { type: String, } } |
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 )
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> template</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">'</span> account-info <span class="token punctuation">'</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> button</span> <span class="token attr-name">@click</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">'</span> changeUsername() <span class="token punctuation">'</span></span> <span class="token punctuation">></span></span> Change Username <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> button</span> <span class="token punctuation">></span></span> {{username}} <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> template</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> script</span> <span class="token punctuation">></span></span> <span class="token script"><span class="token language-javascript"> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> props <span class="token operator">:</span> <span class="token punctuation">{</span> username <span class="token operator">:</span> String <span class="token punctuation">}</span> <span class="token punctuation">,</span> methods <span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token function">changeUsername</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">$emit</span> <span class="token punctuation">(</span> <span class="token string">'changeUsername'</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> script</span> <span class="token punctuation">></span></span> |
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 )
1 2 3 4 5 6 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> template</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> account-info</span> <span class="token attr-name">:username</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> user.username <span class="token punctuation">"</span></span> <span class="token attr-name">@changeUsername</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> user.username = 'new name' <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> template</span> <span class="token punctuation">></span></span> |
Here from me because it is a simple example to change the name, so I handle directly in the call to the component con
1 2 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> account-info</span> <span class="token attr-name">:username</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> user.username <span class="token punctuation">"</span></span> <span class="token attr-name">@changeUsername</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> user.username = 'new name' <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> |
If the internal processing is a bit confusing you should put it into a methods
and then handle, for example:
1 2 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> account-info</span> <span class="token attr-name">:username</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> user.username <span class="token punctuation">"</span></span> <span class="token attr-name">@changeUsername</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> changeName <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> |
Then in the script
you handle the following:
1 2 3 4 5 6 | methods <span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token function">changeName</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> name <span class="token punctuation">.</span> username <span class="token operator">=</span> <span class="token string">'Quang Phu'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Conclude
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 =))