vue學習筆記之slot插槽基本用法實例分析
本文實例講述了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中定義的默認內(nèi)容
<child> <p>Rachel</p> </child>
Vue.component('child', { template: '<div> <p>hello</p> <slot>默認內(nèi)容</slot> </div>' })
使用插槽添加header和footer,使用‘具名插槽',也就是給插槽起個名字,各找各的位置。此處也可以寫默認值,如果父組件沒有對應的插槽內(nèi)容的話,會顯示子組件定義的插槽的默認值。
<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程序設(shè)計有所幫助。
相關(guān)文章
用Axios Element實現(xiàn)全局的請求loading的方法
本篇文章主要介紹了用Axios Element實現(xiàn)全局的請求loading的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-03-03Vue項目通過node連接MySQL數(shù)據(jù)庫并實現(xiàn)增刪改查操作的過程詳解
最近在研究vue項目中使用node.js搭建server服務器,鏈接本地mysql數(shù)據(jù)庫,進行數(shù)據(jù)操作,下面這篇文章主要給大家介紹了關(guān)于Vue項目通過node連接MySQL數(shù)據(jù)庫并實現(xiàn)增刪改查操作的相關(guān)資料,需要的朋友可以參考下2022-05-05vue element-ul實現(xiàn)展開和收起功能的實例代碼
這篇文章主要介紹了vue element-ul實現(xiàn)展開和收起功能的實例代碼,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-11-11關(guān)于vuex的數(shù)據(jù)持久化處理方式
這篇文章主要介紹了關(guān)于vuex的數(shù)據(jù)持久化處理方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10詳解基于element的區(qū)間選擇組件校驗(交易金額)
這篇文章主要介紹了詳解基于element的區(qū)間選擇組件校驗(交易金額),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2021-01-01