vue教程：具名插槽slot（2.6以前废弃写法） 作者：马育民 • 2022-05-11 14:07 • 阅读：10097 # 说明 [](/upload/0/0/1IX3IXbSZxen.png) 如上图，可以在 **组件标签** 中定义多个内容，渲染时，替换 **组件模板** 的指定部分 替换的的规则，就是根据 插槽的名字，上图绿色框 **注意：**本文介绍的，是2.6以前废弃写法，但很多框架仍然使用 # 代码 ### App.vue ``` <template> <div id="box"> <Article2> <template slot="title">{{title}}</template> <div slot="content"> Vue是一个框架 <a href='http://cn.vuejs.org' target="_blank" slot="title">官网</a> </div> </Article2> </div> </template> <script> import Article2 from './views/Article2.vue' export default { name: 'App', data:function(){ return { title:'Vue从入门到放弃' } }, components:{ Article2 } } </script> ``` ### Article2.vue ``` <template> <div> <h2> <slot name="title"></slot> </h2> <div> <slot name="content"></slot> </div> </div> </template> ``` 原文出处：http://malaoshi.top/show_1IX3I9llD00D.html