VueJS-レンダリング機能

コンポーネントとその使用法を見てきました。たとえば、プロジェクト全体で再利用する必要のあるコンテンツがあります。コンポーネントと同じものを変換して使用することができます。

単純なコンポーネントの例を見て、レンダリング関数がその中で何をしなければならないかを見てみましょう。

例

<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>

次のスクリーンショットに示すように、HelloWorldを出力する単純なコンポーネントの上記の例について考えてみます。

これで、コンポーネントを再利用したい場合は、もう一度印刷するだけで再利用できます。例えば、

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

そして、出力は次のようになります。

ただし、コンポーネントにいくつかの変更を加える必要があります。同じテキストを印刷したくありません。どうすれば変更できますか？コンポーネント内に何かを入力する場合、それは考慮されますか？

次の例を考えて、何が起こるか見てみましょう。

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

出力は以前に見たものと同じままです。必要に応じてテキストを変更することはありません。

コンポーネントは、と呼ばれるものを提供します slots。それを利用して、望ましい結果が得られるかどうかを見てみましょう。

例

<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>

上記のコードに見られるように、テンプレートにスロットを追加したため、次のスクリーンショットに示すように、コンポーネント内で送信する値を取得します。

ここで、色とサイズを変更したいと考えてみましょう。たとえば、現在h1タグを使用していて、同じコンポーネントのHTMLタグをpタグまたはdivタグに変更したいとします。どうすれば、これほど多くの変更を実行できる柔軟性が得られるでしょうか。

レンダリング機能を使用してこれを行うことができます。レンダリング関数は、コンポーネントを動的にし、共通性を保ち、同じコンポーネントを使用して引数を渡すことにより、必要な方法で使用するのに役立ちます。

例

<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>

上記のコードでは、コンポーネントを変更し、次のコードを使用してpropsプロパティを持つrender関数を追加しました。

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

小道具は次のようになります。

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

文字列型の属性フィールドを取得するelementtypeというプロパティを定義しました。別の必須フィールド。このフィールドは必須であると記載されています。

レンダリング関数では、次のコードに示すように、elementtypeプロパティを使用しました。

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

レンダリング関数は引数としてcreateElementを取り、同じものを返します。CreateElementは、JavaScriptと同じ方法でDOM要素を作成します。また、attrsフィールドの値を使用して、要素タイプをコンマで分割しました。

CreateElementは、最初のパラメータを作成する要素タグとして使用します。次のコードを使用してコンポーネントに渡されます。

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

コンポーネントは、上記のように小道具フィールドを取得する必要があります。それは：と小道具の名前で始まります。ここでは、要素タグ、色、フォントサイズ、および要素のIDを渡します。

レンダリング関数のcreateElementでは、コンマで分割しているため、最初の要素はelementtagであり、次のコードに示すようにcreateElemetに与えられます。

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

a[0]html要素タグです。次のパラメータは、要素タグの属性です。これらは、次のコードのattrフィールドで定義されています。

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

要素タグに2つの属性を定義しました- id そして style。idに、a [3]を渡します。これは、コンマで分割した後の値です。スタイルを使用して、色とフォントサイズを定義しました。

最後はスロットです。これは、次のコードのコンポーネントで指定したメッセージです。

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

次のコードを使用して、createElementに出力されるテキストを定義しました。

this.$slots.default

コンポーネントフィールドで割り当てられたデフォルトを使用します。

以下は、ブラウザーに表示される出力です。

要素は構造も示しています。これらは私たちが定義したコンポーネントです-

<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>
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