<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> <title>具名插槽</title> </head> <body> <div id="root"> <child content="hello"> <p class="header" slot="header">header</p> <p class="footer" slot="footer">footer</p> </child> </div> <script type="text/javascript"> Vue.component(‘child‘,{ props:{ content:String, }, template:` <div> <slot name="header"> <h1>default 默认值</h1> </slot> <p>{{this.content}}</p> <slot name="footer">3</slot> </div>` }) var vm = new Vue({ el:"#root", }) </script> </body> </html>
原文地址:https://www.cnblogs.com/xuwupiaomiao/p/12079980.html
时间: 2024-10-31 00:50:57