Vuejs-render-function

提供：Dev Guides
移動先:案内、検索

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>

次のスクリーンショットに示すように、Hello Worldを出力する単純なコンポーネントの上記の例を考えてください。

レンダリング関数

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

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

string型の属性フィールドをとる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は、作成されるelementtagとして最初のパラメーターを取ります。 次のコードを使用してコンポーネントに渡されます。 

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

コンポーネントは、上記のようにpropsフィールドを取る必要があります。 ：および小道具の名前で始まります。 ここでは、要素のタグ、色、フォントサイズ、および要素の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]+";"
}

要素タグには、 id と style の2つの属性を定義しました。 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>
「https://www.finddevguides.com/index.php?title=Vuejs-render-function&oldid=13966」から取得
Powered by MediaWiki