<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h3>vue中使用插槽</h3> <child> <!-- 插槽语法 --> <p class="header" slot="header">header content</p> <p class="footer" slot="footer">footer content</p> </child> --------------------------- <child></child> </div> </body> <script type="text/javascript"> Vue.component('child', { template: ` <div> <slot name="header">默认内容</slot> <slot>默认内容</slot> <slot name="footer">默认内容</slot> </div> ` }) let vm = new Vue({ el: '#app' }) </script> </html>
vue_使用slot插槽
猜你喜欢
转载自www.cnblogs.com/JunLan/p/12421065.html
今日推荐
周排行