vue學習筆記之作用域插槽例項分析
阿新 • • 發佈:2020-02-03
本文例項講述了vue學習筆記之作用域插槽。分享給大家供大家參考,具體如下:
<child></child>
Vue.component('child',{ data: function () { return { list: [1,2,3] } },template: '<div> <ul> <li v-for="item of list">{{item}}</li> </ul> </div>' })
那麼,我們要想讓父元件每一次呼叫子元件時再定義顯示方式,也就是說,在子元件中定義好了v-for迴圈了list,具體怎麼顯示,由父元件告訴我。那麼在子元件中定義一個slot插槽,在父元件中新增一個作用域插槽【需要用template包裹】,在其內寫顯示的樣式。
父元件需要得到子元件資料時,就需要template標籤。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue中作用域插槽</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <child> <template slot-scope="props"> <li>{{props.item}}</li><!--我想渲染成列表形式--> </template> </child> </div> </body> </html> <script> Vue.component('child',{ data: function () { return { list: [1,3] } },template: '<div><ul><slot v-for="item of list" :item="item">{{item}}</slot></ul></div>' }) var vm = new Vue({ el: '#app' }) </script>
感興趣的朋友可以使用線上HTML/CSS/JavaScript程式碼執行工具:http://tools.jb51.net/code/HtmlJsRun測試上述程式碼執行效果。
希望本文所述對大家vue.js程式設計有所幫助。