VueJS – Components

Vue Components là một tính năng quan trọng của VueJS. Dùng tạo custom elements và tái sử dụng lại code HTML.

Ví dụ

Tạo file html

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
   </head>
   <body>
      <div id = "component_test">
         <testcomponent></testcomponent>
      </div>
      <div id = "component_test1">
         <testcomponent></testcomponent>
      </div>
      <script type = "text/javascript" src = "js/vue_component.js"></script>
   </body>
</html>

Tạo file js

js/vue_component.js

Vue.component('testcomponent',{
   template : '<div><h1>This is coming from component</h1></div>'
});
var vm = new Vue({
   el: '#component_test'
});
var vm1 = new Vue({
   el: '#component_test1'
});

Trong file .html chúng ta tạo 2 cặp thẻ div với id là component_testcomponent_test1. Trong file .js tạo 2 Vue instances tương các với 2 cặp thẻ div này. Vào tạo một component để sử dụng chung cho cả 2 instances.

Vue.component('nameofthecomponent',{ // options});

Khi một component được tạo, tên của nó trở thành custom element và được dùng trong các element của Vue instance. Cụ thể trong ví dụ này là các cặp thẻ div với id là component_testcomponent_test1.

<div id = "component_test">
   <testcomponent></testcomponent>
</div>
<div id = "component_test1">
   <testcomponent></testcomponent>
</div>

Trong component, chúng ta thêm 1 template với nội dung là html. Và VueJS thay thế nội dung cặp thẻ custom element (<testcomponent></testcomponent>) bằng nội dung template này.

Vue.component('testcomponent',{
   template : '<div><h1>This is coming from component</h1></div>'
});

Kết quả

data và methods

Ở ví dụ trên là 1 ví dụ cơ bản về component. Tiếp theo, chúng ta có thể thêm data, methods trong component.

Ví dụ

Tạo file html

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
   </head>
   <body>
      <div id = "component_test">
         <testcomponent></testcomponent>
      </div>
      <div id = "component_test1">
         <testcomponent></testcomponent>
      </div>
      <script type = "text/javascript" src = "js/vue_component.js"></script>
   </body>
</html>

Tạo file js

js/vue_component.js

Vue.component('testcomponent',{
   template : '<div v-on:mouseover = "changename()" v-on:mouseout = "originalname();"><h1>Custom Component created by <span id = "name">{{name}}</span></h1></div>',
   data: function() {
      return {
         name : "Ria"
      }
   },
   methods:{
      changename : function() {
         this.name = "Ben";
      },
      originalname: function() {
         this.name = "Ria";
      }
   }
});
var vm = new Vue({
   el: '#component_test'
});
var vm1 = new Vue({
   el: '#component_test1'
});

Ở đây, chúng ta thêm data là function và return kết quả là object. Object chứa property có giá trị là Ria.

template có nội dung như sau:

template : '<div v-on:mouseover = "changename()" v-on:mouseout = "originalname();"><h1>Custom Component created by <span id = "name">{{name}}</span></h1></div>',

Data trong Component chúng ta là 1 function, và chúng ta có thể sử dụng property name của nó như một Vue instance bình thường. 2 phương thức originalname, và changename dùng để thay đổi giá trị của property name.

Chúng ta đã thêm 2 events là mouseovermouseout để gọi các phương thức originalname, và changename khi rê chuột vào thẻ div.

Kết quả

Khi rê chuột vào

Dynamic Components

Dynamic Components được tạo với cập thẻ <component></component>.

Ví dụ

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <component v-bind:is = "view"></component>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               view: 'component1'
            },
            components: {
               'component1': {
                  template: '<div><span style = "font-size:25;color:red;">Dynamic Component</span></div>'
               }
            }
         });
      </script>
   </body>
</html>

Kết quả

Cấu trúc

<component v-bind:is = "view"></component>

Với v-bind:is = “view”, giá trị view được khai báo trong Vue instance.

var vm = new Vue({
   el: '#databinding',
   data: {
      view: 'component1'
   },
   components: {
      'component1': {
         template: '<div><span style = "font-size:25;color:red;">Dynamic Component</span></div>'
      }
   }
});