VueJS - Chức năng kết xuất

Chúng tôi đã thấy các thành phần và cách sử dụng nó. Ví dụ: chúng tôi có một nội dung cần được sử dụng lại trong toàn bộ dự án. Chúng tôi có thể chuyển đổi giống như một thành phần và sử dụng nó.

Hãy xem một ví dụ về một thành phần đơn giản và xem chức năng kết xuất phải làm gì bên trong nó.

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>
      <script type = "text/javascript">
         Vue.component('testcomponent',{
            template : '<h1>Hello World</h1>',
            data: function() {
            },
            methods:{
            }
         });
         var vm = new Vue({
            el: '#component_test'
         });
      </script>
   </body>
</html>

Hãy xem xét ví dụ trên về một thành phần đơn giản in Hello World như được hiển thị trong ảnh chụp màn hình sau.

Bây giờ, nếu chúng ta muốn sử dụng lại thành phần, chúng ta có thể làm như vậy bằng cách in lại nó. Ví dụ,

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

Và đầu ra sẽ như sau.

Tuy nhiên, bây giờ chúng ta cần một số thay đổi đối với thành phần. Chúng tôi không muốn cùng một văn bản được in. Làm thế nào chúng ta có thể thay đổi nó? Trong trường hợp, chúng tôi nhập một cái gì đó bên trong thành phần, nó sẽ được xem xét?

Chúng ta hãy xem xét ví dụ sau và xem điều gì sẽ xảy ra.

<div id = "component_test">
   <testcomponent>Hello Jai</testcomponent>
   <testcomponent>Hello Roy</testcomponent>
   <testcomponent>Hello Ria</testcomponent>
   <testcomponent>Hello Ben</testcomponent>
</div>

Đầu ra vẫn giống như chúng ta đã thấy trước đó. Nó không thay đổi văn bản như chúng ta muốn.

Thành phần cung cấp một cái gì đó được gọi là slots. Hãy tận dụng nó và xem chúng ta có đạt được kết quả như mong muốn không nhé.

Thí dụ

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "component_test">
         <testcomponent>Hello Jai</testcomponent>
         <testcomponent>Hello Roy</testcomponent>
         <testcomponent>Hello Ria</testcomponent>
         <testcomponent>Hello Ben</testcomponent>
      </div>
      <script type = "text/javascript">
         Vue.component('testcomponent',{
            template : '<h1><slot></slot></h1>',
            data: function() {
            },
            methods:{
            }
         });
         var vm = new Vue({
            el: '#component_test'
         });
      </script>
   </body>
</html>

Như đã thấy trong đoạn mã trên, trong mẫu chúng ta đã thêm vị trí, do đó bây giờ nó nhận giá trị để gửi vào bên trong thành phần như được hiển thị trong ảnh chụp màn hình sau.

Bây giờ, chúng ta hãy xem xét chúng ta muốn thay đổi màu sắc và kích thước. Ví dụ: hiện tại chúng tôi đang sử dụng thẻ h1 và chúng tôi muốn thay đổi thẻ HTML thành thẻ p hoặc thẻ div cho cùng một thành phần. Làm thế nào chúng ta có thể linh hoạt để thực hiện nhiều thay đổi như vậy?

Chúng ta có thể làm như vậy với sự trợ giúp của hàm render. Chức năng kết xuất giúp làm cho thành phần động và sử dụng theo cách nó được yêu cầu bằng cách giữ cho nó phổ biến và giúp truyền các đối số bằng cách sử dụng cùng một thành phần.

Thí dụ

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "component_test">
         <testcomponent :elementtype = "'div,red,25,div1'">Hello Jai</testcomponent>
         <testcomponent :elementtype = "'h3,green,25,h3tag'">Hello Roy</testcomponent>
         <testcomponent :elementtype = "'p,blue,25,ptag'">Hello Ria</testcomponent>
         <testcomponent :elementtype = "'div,green,25,divtag'">Hello Ben</testcomponent>
      </div>
      <script type = "text/javascript">
         Vue.component('testcomponent',{
            render :function(createElement){
               var a = this.elementtype.split(",");
               return createElement(a[0],{
                  attrs:{
                     id:a[3],
                     style:"color:"+a[1]+";font-size:"+a[2]+";"
                  }
               },
               this.$slots.default
               )
            },
            props:{
               elementtype:{
                  attributes:String,
                  required:true
               }
            }
         });
         var vm = new Vue({
            el: '#component_test'
         });
      </script>
   </body>
</html>

Trong đoạn mã trên, chúng tôi đã thay đổi thành phần và thêm chức năng kết xuất với thuộc tính đạo cụ bằng cách sử dụng đoạn mã sau.

Vue.component('testcomponent',{
   render :function(createElement){
      var a = this.elementtype.split(",");
      return createElement(a[0],{
         attrs:{
            id:a[3],
            style:"color:"+a[1]+";font-size:"+a[2]+";"
         }
      },
      this.$slots.default
      )
   },
   props:{
      elementtype:{
         attributes:String,
         required:true
      }
   }
});

Các đạo cụ trông như sau.

props:{
   elementtype:{
      attributes:String,
      required:true
   }
}

Chúng tôi đã định nghĩa một thuộc tính gọi là elementtype, thuộc tính này nhận trường thuộc tính của kiểu string. Một trường bắt buộc khác, đề cập rằng trường là bắt buộc.

Trong hàm render, chúng ta đã sử dụng thuộc tính elementtype như trong đoạn mã sau.

render :function(createElement){
   var a = this.elementtype.split(",");
   return createElement(a[0],{
      attrs:{
         id:a[3],
         style:"color:"+a[1]+";font-size:"+a[2]+";"
      }
   },
   this.$slots.default
   )
}

Hàm kết xuất lấy createElement làm đối số và trả về như cũ. CreateElement tạo phần tử DOM theo cách giống như trong JavaScript. Chúng tôi cũng đã chia loại phần tử trên dấu phẩy, sử dụng các giá trị trong trường attrs.

CreateElement đang lấy tham số đầu tiên làm thẻ phần tử sẽ được tạo. Nó được chuyển tới thành phần bằng đoạn mã sau.

<testcomponent  :elementtype = "'div,red,25,div1'">Hello Jai</testcomponent>

Thành phần cần lấy trường đạo cụ như hình trên. Nó bắt đầu bằng: và tên của đạo cụ. Ở đây, chúng tôi đang chuyển thẻ phần tử, màu sắc, kích thước phông chữ và id của phần tử.

Trong hàm kết xuất, trong createElement, chúng ta đang tách trên dấu phẩy, vì vậy phần tử đầu tiên là thẻ phần tử, được cấp cho createElemet như được hiển thị trong đoạn mã sau.

return createElement(
   a[0],{
      attrs:{
         id:a[3],
         style:"color:"+a[1]+";font-size:"+a[2]+";"
      }
   },
   this.$slots.default
)

a[0]là thẻ phần tử html. Tham số tiếp theo là các thuộc tính cho thẻ phần tử. Chúng được định nghĩa trong trường attr trong đoạn mã sau.

attrs:{
   id:a[3],
   style:"color:"+a[1]+";font-size:"+a[2]+";"
}

Chúng tôi đã xác định hai thuộc tính cho thẻ phần tử - idstyle. Đến id, chúng ta đang chuyển một [3], là giá trị mà chúng ta có sau khi tách trên dấu phẩy. Sử dụng kiểu, chúng tôi đã xác định màu sắc và kích thước phông chữ.

Cuối cùng là vị trí, đó là thông báo mà chúng tôi đã đưa ra trong thành phần trong đoạn mã sau.

<testcomponent :elementtype = "'div,red,25,div1'">Hello Jai</testcomponent>

Chúng tôi đã xác định văn bản sẽ được in trong createElement bằng cách sử dụng đoạn mã sau.

this.$slots.default

Nó lấy mặc định được gán trong trường thành phần.

Sau đây là kết quả mà chúng tôi nhận được trong trình duyệt.

Các yếu tố cũng cho thấy cấu trúc. Đây là những thành phần mà chúng tôi đã xác định -

<div id = "component_test">
   <testcomponent :elementtype = "'div,red,25,div1'">Hello Jai</testcomponent>
   <testcomponent :elementtype = "'h3,green,25,h3tag'">Hello Roy</testcomponent>
   <testcomponent :elementtype = "'p,blue,25,ptag'">Hello Ria</testcomponent>
   <testcomponent :elementtype = "'div,green,25,divtag'">Hello Ben</testcomponent>
</div>