vue当中的插槽，指的即是slot，是组件当中的一块HTML模板。该模板是否显示，以及如何显示由其父组件说了算。不过插槽显示的位置是由子组件决定 ，你将slot写在组件template的哪块，父组件传过来的模板将来就显示在哪块！
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> <h1>{{msg}}</h1> <tn> <!-- <div v-slot:heater>slot插槽位置</div> --> <template v-slot:heater> <h3>头部</h3> </template> <p>直接插入组件的内容</p> <template v-slot:footer> <h3>尾部内容</h3> </template> </tn> <tn></tn> </div> <template id="cpn"> <div> <button>anniu</button> <h3>下面是一个插槽</h3> <slot name="heater"></slot> <section> 内容主体部分 </section> <slot name="footer"></slot> </template> <script> new Vue({ el:'#app', data:{ msg:'hello word ' }, components: { tn:{ template:'#cpn', data(){ return { } }, methods: { parent(){ console.log(this.$parent.msg); } } } } }) </script> </body> </html>