Vue Components are an important feature of VueJS that creates custom elements, which can be reused in HTML.
Components are created with the Vue.component() method.

- Syntax:
Vue.component('component-name', { options });

It accepts the same options as new Vue(), such as data, computed, watch, methods, and lifecycle hooks. The only exceptions are a few root-specific options like el.
A component's data option must be a function that returns an object, so that each instance can maintain an independent copy of the returned data.

Let's create a component, that will give a better understanding on how components work with Vue.js.
// Define a new component called test_comp
Vue.component('test_comp', {
 data: function(){
 return { txt:'Life is miracle' }
 },
 template: '<div><h4>This is me</h4><p>{{txt}}.</p></div>'
});

To use this Vue component in the html document, create a custom html element where the tag-name is the name of the component (here "test_comp"), then create a Vue instance, like in the following example:
<div id='demo'>
 <test_comp></test_comp>
</div>

<script>
new Vue({ el: '#demo' });
</script>
The custom tag (here <test_comp>) is replaced with the value of the template property from the defined component.

If you have more html tags in component's template, you must wrap the template in a parent element.
In our example we added H4 and P tags inside a Div element.


Reusing Vue Components

Components can be reused as many times as you want.
Example:
<div id='demo'>
 <test_comp></test_comp>
 <test_comp></test_comp>
 <test_comp></test_comp>
</div>

<script>
// Define a new component called test_comp
Vue.component('test_comp', {
 data: function(){
 return { txt:'Life is miracle' }
 },
 template: '<div><h4>This is me</h4><p>{{txt}}.</p></div>'
});

// Create a Vue instance
new Vue({ el: '#demo' });
</script>

Events and Methods in Components

In Vue components we can define methods and event listeners in template.
Example:
<div id='demo'>
Click on these:
 <comp_test></comp_test>
 <comp_test></comp_test>
</div>

<script>
// Define a new component called comp_test
Vue.component('comp_test', {
 template: '<div v-bind:style="styleobj" @click="countClicks">Nr. clicks: {{ nr_c }}.</div>',
 data: function(){
 return {nr_c:0, styleobj:{background:'#babafe', height:'80px', margin:'8px', width:'111px'}};
 },
 methods:{
 countClicks: function(ev){
 this.nr_c++;
 }
 }
});

// Create a Vue instance
new Vue({ el: '#demo'});
</script>

Passing data to Component with Props

In Vue.js props contains variables that are used to pass values to its child components.
Props are custom attributes you can register on a component, and they are defined into an Array in the props property.
Test and study the next example:
<div id='demo'>
 <comp_button text='Comments'></comp_button>
 <comp_button text='Likes'></comp_button>
 <comp_button text='Shares'></comp_button>
</div>

<script>
// Define a new component called comp_button
Vue.component('comp_button', {
 props: ['text'],
 template: '<button>{{text}}</button> '
});

// Create a Vue instance
new Vue({ el: '#demo' });
</script>
Props are almost like named variable, they pass to the child component whatever data they receive from the parent.
We can obtain the same results with the following code (with a v-for directive), which is more elegant:
<div id='demo'>
 <comp_button v-for='txt in ar_txt' v-bind:text='txt'></comp_button>
</div>

<script>
// Define a new component called comp_button
Vue.component('comp_button', {
 props: ['text'],
 template: '<button>{{text}}</button> '
});

const btn_txt =['Comments', 'Likes', 'Shares']; //array with data for text in component

// Create a Vue instance
new Vue({
 el: '#demo',
 data:{
 ar_txt: btn_txt
 }
});
</script>

Global and Local Components

Global components are defined with the Vue.component() method, but the components can also be registered directly in the vue instance, in the components property. This is called Local registration, as shown in the following script:
<div id='demo'>
 <comp_arti v-for='obj in article' v-bind:post='obj'></comp_arti>
</div>

<script>
//array with data for article content in component
const arti =[
 {title: 'Be Happy', cnt:'<i>Just transmit joy</i>'},
 {title: 'Be Good', cnt:'<b>Recognize holiness and innocence in everything you perceive.</b>'},
 {title: 'Be (in) Peace', cnt:'<b>Just be the inner Self.</b>'}
];

// Create a Vue instance
new Vue({
 el: '#demo',
 data:{
 article: arti
 },
 components:{
 comp_arti:{
 props:['post'],
 template:'<div><h3>{{post.title}}</h3><div v-html="post.cnt"></div></div>'
 }
 }
});
</script>

Content Distribution with Slot

If you want to pass html content from parent tag to a component use the custom <slot> tag in component's template.
In the following example, the <slot> tag will be replaced with the HTML content added in the <msg_box> element (parent).
<div id='demo'>
 <msg_box>
 <i>I'm Free.</i>
 </msg_box>
</div>

<script>
Vue.component('msg_box', {
 template:'<div class="my_msg"><b>Success:</b> <slot></slot></div>'
})

// Create a Vue instance
new Vue({
 el: '#demo'
});
</script>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which meta tag provides a short description of the page?
<meta content="..."> <meta description="..."> <meta http-equiv="...">
<meta name="description" content="70-160 characters that describes the content of the page" />
Which CSS property is used to stop the wrapping effect of the "float"?
clear text-align position
#some_id {
  clear: both;
}
Click on the method which gets an array with all the elements in the document that have a specified tag name.
getElementsByName() getElementById() getElementsByTagName()
var divs = document.getElementsByTagName("div");
var nr_divs = divs.length;
alert(nr_divs);
Indicate the PHP function which returns the number of elements in array.
is_[) count() strlen()
$arr =[7, 8, "abc", 10);
$nri = count($arr);
echo $nri;        // 4
Vue JS Components

Last accessed pages

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (83567)
  2. AJAX with GET and PHP (6209)
  3. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (46548)
  4. Get Duration of Audio /Video file before Upload (8335)
  5. Create simple Website with PHP (24838)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (1591)
  2. Contact page - CoursesWeb (1549)
  3. Tabs effect with CSS (1549)
  4. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (1297)
  5. Insert, Select and Update NULL value in MySQL (691)