Vueのslotについて

Question

Vueのslotについて勉強しているのですが理解が追い付かず嵌っています。
分かる方がいましたら回答いただけると嬉しいです！！よろしくお願いいたします！！

以下のソースは子コンポーネントに持たせたリストデータを親テンプレート側で参照してv-forでレンダリングしようとしたものです。
しかし実際はレンダリングされず、その原因がわかりません。
レンダリング結果は空の<div></div>が表示されるのみです。

    <div id="app">
      <comp-child>
        <template slot-scope="list">
          <div v-for="item in list">{{item.name}}</div>
        </template>
      </comp-child>
    </div>

Vue.component('comp-child', {
  template: `
    <div>
      <slot :list="list"></slot>
    </div>
  `,
  data: function() {
    return {
      list: [
        {name: 'task01'},
        {name: 'task02'}
      ]
    }
  }
})

new Vue({
  el: '#app'
})

分かる方がいましたらぜひ回答していただきたいです！！
よろしくお願いいたします。

Answer 1

ごめんなさい、時間ないので説明だけで...

親コンポーネントのslot-scopeには、子コンポーネートのslotにバインドされた属性の全てが1つのオブジェクトとして渡されます。
そのため、子コンポーネントのslotにバインドされた個々の属性は、slot-scopeで渡されたオブジェクトのプロパティとして持つことになり、子コンポーネントのslotにバインドされたlistを参照したいなら親コンポーネントの"item in list"の部分を"item in list.list"のようにオブジェクトのプロパティを参照するようにすればうまくいきます。
ちなみに、slot-scope="xxx"のxxx部分は、単なる変数なので命名規則に従っていればどんな変数名でも大丈夫です。

間違っていたらご指摘ください。

Comments

[tmykndr]

tomouchiさん
お忙しい中回答していただきありがとうございます！！
こちらの回答のおかげで問題も解決できて、slotについて理解が深まりました！！
本当にありがとうございました。

[tomouchi]

参考になったようで良かったです!