溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下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, 2, 3] } }, template: '<div><ul><slot v-for="item of list" :item="item">{{item}}</slot></ul></div>' }) var vm = new Vue({ el: '#app' }) </script>
以上是“vue中作用域插槽的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
