网友回复
slot英文就是插槽,其实就是一个占位的,
以前我们写一个组件,比如child组件,组件内部代码会默认被清空
比如<child><span>hello</span></child>,在执行的时候会被child组件内的template替换掉,那么如果我想要保留怎么办呢?就可以使用slot,示例代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Slot</title> <style type="text/css"> .panel{ width: 400px; border: 1px solid #ccc; } .panel>*{ padding: 15px; border-bottom: 1px solid #ccc; } .footer{ border: none; } </style> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script> </head> <body> <div id="app"> <Child> <template slot="header" ><div>这是头部</div></template> <template slot="content" slot-scope="msg"><div>{{msg.data}}</div></template> <template slot="fooer" ><div>这是尾部</div></template> </Child> </div> <template id="child"> <div> <div class="panel"> <slot name="header" :data="msg"></slot> <div class="content"> <slot name="content" :data="msg"></slot> </div> <slot name="fooer" :data="msg"></slot> </div> </div> </template> </body> <script type="text/javascript"> new Vue({ el:"#app", data:{ }, components:{ Child:{ template:"#child", data(){ return{ msg:"这是内容" } } } } }) </script> </html>