溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這期內容當中小編將會給大家帶來有關slot插槽怎么在vue中使用，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
不使用插槽，在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>'
})Vue具體輕量級框架、簡單易學、雙向數據綁定、組件化、數據和結構的分離、虛擬DOM、運行速度快等優勢，Vue中頁面使用的是局部刷新，不用每次跳轉頁面都要請求所有數據和dom，可以大大提升訪問速度和用戶體驗。
上述就是小編為大家分享的slot插槽怎么在vue中使用了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
