首頁 > 開發者 > JavaScript
vue slot 在子組件中顯示父組件傳遞的模板，vueslot
父組件使用沒有指定slot屬性，預設為default
在slot中可以使用預設值，如果父組件沒有傳遞對應的slot，則會顯示預設值
<!DOCTYPE html><html><head> <meta charset="utf-8"> <script src="vue.js" charset="utf-8"></script></head><body> <div id="app"> <modal> <!-- 調用父組件的方法 --> <h1 @click='click'>aaa</h1></modal> <modal> <h2>bbb</h2></modal> <modal> <!-- 使用slot設定模板中的名字,會插入到指定的slot中 --> <p slot='title'>hello</p> <p slot='content'> world </p> </modal> <modal></modal> </div> <template id="modal"> <!-- 使用slot在子組件中顯示父組件傳過來的模板 --> <div> modal <slot name='default'>如果沒有會使用這個預設值</slot> <h1> title: <slot name='title'> </slot> </h1> content: <slot name='content'></slot> </div> </template> <script type="text/javascript"> let modal = { template: '#modal' } new Vue({ el: '#app', components: { // es 簡寫 ，唯寫一個的意思為 // modal:modal modal }, methods: { click() { console.log('aaa') } } }) </script></body></html>
總結
以上所述是小編給大家介紹的vue slot 在子組件中顯示父組件傳遞的模板，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對幫客之家網站的支援！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
