正月の休みを利用してVue.jsの理解を深めています。
その中で公式ドキュメントを読んでいて理解が追い付かないところがありましたので記載します。
分かる方がいましたらご教示いただけたら嬉しいです!よろしくお願いします!
描画関数の使いどころとして実例を交えて解説されていましたが、描画関数のソースの理解ができません。
ドキュメントには、アンカーヘッダを生成するテンプレートが実例で載っており、それについて描画関数を使用する前と使用した後で、ソースの違いについて解説が載っています。
描画関数を使う前 - X-templateを利用した例
javascript
1<anchored-heading :level="1">Hello world!</anchored-heading>
javascript
1<script type="text/x-template" id="anchored-heading-template"> 2 <h1 v-if="level === 1"> 3 <slot></slot> 4 </h1> 5 <h2 v-else-if="level === 2"> 6 <slot></slot> 7 </h2> 8 <h3 v-else-if="level === 3"> 9 <slot></slot> 10 </h3> 11 <h4 v-else-if="level === 4"> 12 <slot></slot> 13 </h4> 14 <h5 v-else-if="level === 5"> 15 <slot></slot> 16 </h5> 17 <h6 v-else-if="level === 6"> 18 <slot></slot> 19 </h6> 20</script>
javascript
1Vue.component('anchored-heading', { 2 template: '#anchored-heading-template', 3 props: { 4 level: { 5 type: Number, 6 required: true 7 } 8 } 9})
上記のソースは冗長なので、描画関数を用いて以下のように書き換えて効率化しています。
描画関数を使ったソース
javascript
1<anchored-heading :level="1">Hello world!</anchored-heading> // これは変更なし
javascript
1Vue.component('anchored-heading', { 2 render: function (createElement) { 3 return createElement( 4 'h' + this.level, // タグ名 5 this.$slots.default // 子の配列 6 ) 7 }, 8 props: { 9 level: { 10 type: Number, 11 required: true 12 } 13 } 14})
そして公式ドキュメントの解説は以下のように説明されています。
このケースでは、 slot 属性無しでコンポーネントに子を渡した時に ( anchored-heading の内側の Hello world! のような) 、それらの子がコンポーネントインスタンス上の $slots.default にストアされているかを知っている必要があります。
私が分からないところは以下の2点です。
①
>__slot 属性無しでコンポーネントに子を渡した時に ( anchored-heading の内側の Hello world! のような) __
以上の説明文は、親から子にslotコンテンツを配信しなかったとき(=slotコンテンツはデフォルトを使用したいとき)と解釈して問題ないか
②
>__ それらの子がコンポーネントインスタンス上の $slots.default にストアされているかを知っている必要があります。 __
この説明は、子コンポーネント側にデフォルトのslotコンテンツが設定されていることを言っていますか?
$slots.default にストアされているか、とありますがまったく理解できず...
公式ドキュメントのリンクを載せておきます。
描画関数とJSX
ご説明いただける方がいましたら何卒よろしくお願いいたします。
ここまで読んでいただきありがとうございました。
みなさまにとって実り多き一年になりますよう願っております。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/01/03 13:27
2019/01/03 13:29 編集