01.普通插槽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> <!-- 2.在使用同一个组件时，给同一个组件添加不同的内容 --> <cpn><button>首页</button> </cpn> <cpn><button>新闻中心</button> </cpn> <!-- 默认在里面添加了button按钮 --> <cpn></cpn> <cpn></cpn> </div> <template id="menu"> <div> <h1>我是组件</h1> <!-- 1.这里添加一个空的slot；另外给slot添加一个默认值即button按钮，当上面的cpn没有添加内容时，就自动添加默认值 --> <slot><button>按钮</button></slot> </div> </template> <script> var app=new Vue({ el:'#app', data:{ }, components:{ cpn:{ template:'#menu', } } }) </script> </body> </html>
02.具名插槽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> <!-- 1.如果直接这样写，会修改所有没有name的slot --> <!-- <cpn><span>内容</span></cpn> --> <!-- 2.修改其中一个带有name的slot --> <cpn><span slot="center">中间</span></cpn> </div> <template id="menu"> <div> <h2>标题</h2> <slot name="left"><span>左边</span></slot> <slot name="center"><span>中心</span></slot> <slot name="right"><span>右边</span></slot> </div> </template> <script> var app=new Vue({ el:'#app', data:{ }, components:{ cpn:{ template:'#menu' } } }) </script> </body> </html>