<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!-- <script src="./js/vue.js" type="text/javascript" charset="utf-8"></script> --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style> </style> </head> <body> <div id='app'> <mycpn> <template #slot1> <h2>命名的slot1 (简写方式：# = v-slot:)</h2> </template> <!-- <template #default> --> <hr/> <h2>正常写法 (#default 可以不写，甚至 template 标签也可以不写) </h2> <hr/> <!-- </template> --> <template #slot2='{cpninfo}'> <h3 >带参数写法</h3> <h3>id = {{cpninfo.id}}</h3> <h3>msg = {{cpninfo.msg}} </h3> </template> </mycpn> </div> <template id='mycpn'> <div> <h3>mycpn</h3> <slot name='slot1'></slot> <slot></slot> <slot name='slot2' :cpninfo="info"> <h2>默认内容</h2> </slot> </div> </template> <script> const app = new Vue({ el: '#app', components: { mycpn: { template: '#mycpn', data () { return { info: { id: '1001', msg: 'hello world' } } } } } }) </script> </body> </html>