Vueのslotについて勉強しているのですが理解が追い付かず嵌っています。
分かる方がいましたら回答いただけると嬉しいです!!よろしくお願いいたします!!
以下のソースは子コンポーネントに持たせたリストデータを親テンプレート側で参照してv-forでレンダリングしようとしたものです。
しかし実際はレンダリングされず、その原因がわかりません。
レンダリング結果は空の<div></div>が表示されるのみです。
html
1 <div id="app"> 2 <comp-child> 3 <template slot-scope="list"> 4 <div v-for="item in list">{{item.name}}</div> 5 </template> 6 </comp-child> 7 </div>
js
1Vue.component('comp-child', { 2 template: ` 3 <div> 4 <slot :list="list"></slot> 5 </div> 6 `, 7 data: function() { 8 return { 9 list: [ 10 {name: 'task01'}, 11 {name: 'task02'} 12 ] 13 } 14 } 15}) 16 17new Vue({ 18 el: '#app' 19})
分かる方がいましたらぜひ回答していただきたいです!!
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/11/29 14:27
2018/11/29 14:46