vue學習筆記之slot插槽基本用法例項分析
阿新 • • 發佈:2020-02-03
本文例項講述了vue學習筆記之slot插槽基本用法。分享給大家供大家參考,具體如下:
不使用插槽,在template中用v-html解析父元件傳來的帶有標籤的content
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <child content="<p>Rachel</p>"></child> </div> </body> </html> <script> Vue.component('child',{ props: ['content'],template: '<div> <p>hello</p> <div v-html="this.content"></div> </div>' }) var vm = new Vue({ el: '#app' }) </script>
使用插槽,如果父元件為空,就會顯示slot中定義的預設內容
<child> <p>Rachel</p> </child>
Vue.component('child',{ template: '<div> <p>hello</p> <slot>預設內容</slot> </div>' })
使用插槽新增header和footer,使用‘具名插槽',也就是給插槽起個名字,各找各的位置。此處也可以寫預設值,如果父元件沒有對應的插槽內容的話,會顯示子元件定義的插槽的預設值。
<div id="app"> <body-content> <div class="header" slot="header">header</div> <div class="footer" slot="footer">footer</div> </body-content> </div>
Vue.component('body-content',{ template: '<div> <slot name="header">default header</slot> <div class="content">content</div> <slot name="footer">default footer</slot> </div>' })
感興趣的朋友可以使用線上HTML/CSS/JavaScript程式碼執行工具:http://tools.jb51.net/code/HtmlJsRun測試上述程式碼執行效果。
希望本文所述對大家vue.js程式設計有所幫助。