Vuejs-render-function
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>