VueJS - Thành phần

Vue Components là một trong những tính năng quan trọng của VueJS tạo ra các phần tử tùy chỉnh, có thể được sử dụng lại trong HTML.

Hãy làm việc với một ví dụ và tạo một thành phần, điều đó sẽ giúp hiểu rõ hơn về cách các thành phần hoạt động với VueJS.

Thí dụ

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/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>

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 tệp .html, chúng tôi đã tạo hai div với id component_test và component_test1. bên trong.jscác tệp được hiển thị ở trên, hai phiên bản Vue được tạo bằng các id div. Chúng tôi đã tạo một thành phần chung để được sử dụng với cả hai trường hợp chế độ xem.

Để tạo một thành phần, sau đây là cú pháp.

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

Khi một thành phần được tạo, tên của thành phần sẽ trở thành phần tử tùy chỉnh và tên của thành phần tương tự có thể được sử dụng trong phần tử thể hiện Vue được tạo, tức là bên trong div có id component_test và component_test1.

bên trong .js , chúng tôi đã sử dụng một thành phần thử nghiệm làm tên của thành phần và cùng một tên được sử dụng làm phần tử tùy chỉnh bên trong các div.

Thí dụ

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

Trong thành phần được tạo trong .js, chúng tôi đã thêm một mẫu mà chúng tôi đã gán mã HTML. Đây là một cáchregistering a global component, có thể được tạo thành một phần của bất kỳ phiên bản vue nào như được hiển thị trong tập lệnh sau.

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

Khi thực thi, điều tương tự sẽ được phản ánh trong trình duyệt.

Các thành phần được cung cấp thẻ phần tử tùy chỉnh, tức là <testcomponent></testcomponent>. Tuy nhiên, khi chúng tôi kiểm tra tương tự trong trình duyệt, chúng tôi sẽ không nhận thấy thẻ tùy chỉnh ở dạng HTML thuần túy hiện diện trong mẫu như được hiển thị trong ảnh chụp màn hình sau.

Chúng tôi cũng đã trực tiếp biến các thành phần trở thành một phần của thể hiện vue như được hiển thị trong tập lệnh sau.

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

Đây được gọi là local registration và các thành phần sẽ là một phần của chỉ cá thể vue được tạo.

Cho đến nay, chúng ta đã thấy thành phần cơ bản với các tùy chọn cơ bản. Bây giờ, hãy thêm một số tùy chọn khác như dữ liệu và phương thức vào nó. Cũng giống như Vue instance có dữ liệu và phương thức, component cũng chia sẻ như vậy. Do đó, chúng tôi sẽ mở rộng mã, mà chúng tôi đã thấy với dữ liệu và phương thức.

Thí dụ

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/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>

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'
});

bên trong .jsở trên, chúng tôi đã thêm dữ liệu là một hàm, trả về một đối tượng. Đối tượng có thuộc tính tên, được gán giá trị 'Ria'. Điều này được sử dụng trong mẫu sau.

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

Mặc dù có dữ liệu là một hàm trong các thành phần, chúng ta có thể sử dụng các thuộc tính của nó giống như cách chúng ta sử dụng với cá thể Vue trực tiếp. Ngoài ra, có hai phương pháp được thêm vào, đổi tên và tên gốc. Trong tên đổi, chúng tôi đang thay đổi thuộc tính tên và trong tên ban đầu, chúng tôi sẽ đặt lại nó về tên ban đầu.

Chúng tôi cũng đã thêm hai sự kiện trên div, mouseover và mouseout. Chi tiết của các sự kiện sẽ được thảo luận trong chương Sự kiện. Vì vậy, hiện tại, các cuộc gọi di chuột quachangename các lệnh gọi phương thức và di chuột originalname phương pháp.

Màn hình tương tự được hiển thị trong trình duyệt sau.

Như đã thấy trong trình duyệt ở trên, nó hiển thị tên được gán trong thuộc tính dữ liệu, là tên giống nhau. Chúng tôi cũng đã chỉ định một sự kiện di chuột qua div và cũng là một sự kiện di chuột. Hãy xem điều gì sẽ xảy ra khi chúng ta di chuột qua và di chuột ra.

Khi di chuột qua, chúng ta thấy tên của thành phần đầu tiên được đổi thành Ben, tuy nhiên, thành phần thứ hai vẫn như cũ. Điều này là do thành phần dữ liệu là một hàm và nó trả về một đối tượng. Vì vậy, khi nó được thay đổi ở một nơi, điều tương tự sẽ không bị ghi đè trong các trường hợp khác.

Thành phần động

Các thành phần động được tạo bằng từ khóa <component></component> và nó được ràng buộc bằng cách sử dụng một thuộc tính như được hiển thị trong ví dụ sau.

Thí dụ

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/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>

Đầu ra

Thành phần động được tạo bằng cú pháp sau.

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

Nó có v-bind: is = ”view” và một view giá trị được gán cho nó. View được định nghĩa trong Vue instance như sau.

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

Khi được thực thi, mẫu Dynamic Component được hiển thị trong trình duyệt.

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved