分类
商品
- 商品
- 店铺
- 资讯
vue 2.6.0 中，为具名插槽和作用域插槽引入了一个新的统一的语法 (即
v-slot指令)。它取代了slot和slot-scope这两个目前已被废弃但未被移除且仍在文档中的 attribute。新语法的由来可查阅这份 RFC。
在接下来所有的 2.x 版本中 slot 和 slot-scope attribute 仍会被支持，但已经被官方废弃且不会出现在 Vue 3 中
本文基于以上背景，研究v-slot和slot 和 slot-scope使用上的区别。
<!DOCTYPE html><html xmlns:v-slot="http://www.w3.org/1999/XSL/Transform"><head> <meta charset="UTF-8"> <title>slot插槽不同版本使用方式-2.6.0分割</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script> <style> #app { display: flex; } strong { color: #57eeff; } .article { flex: 1; padding: 20px; } </style></head><body><div id="app"> <!--2.6.0及以上写法--> <el-article :article="article"> <template v-slot:sub-title> <h5>-插槽的使用</h5> </template> <template v-slot:content> <p>content1</p> </template> <p>main1</p> <template v-slot:content> <p>content2</p> </template> <p>main2</p> <template v-slot:footer="{date}"> <p>{{date}}</p> </template> </el-article> <!--2.6.0-写法--> <el-article :article="article"> <h5 slot="sub-title">-插槽的使用</h5> <template slot="content"> <p slot="content">content1</p> </template> <p>main1</p> <template slot="content"> <p>content2</p> </template> <p>main2</p> <template slot="footer" slot-scope="{date}"> <p>{{date}}</p> </template> </el-article></div><script>Vue.component('el-article', { props: ['article'], data() { return { date: new Date() } }, template: ` <article class="article"> <header> <strong>header：</strong> <h1>{{article.title}}</h1> <slot name="sub-title"></slot> <p>作者：{{article.author}}</p> <hr/> </header> <main> <strong>content：</strong> <slot name="content"></slot> <slot></slot> <hr/> </main> <footer> <strong>footer：</strong> <slot name="footer" :date="date"></slot> <hr/> </footer> </article> `});new Vue({ el: '#app', data: { article: { title: 'vue.js 从入门到精通', author: 'Ada' } }});</script></body></html>
界面效果v-slot:prop 等价于 slot="prop"v-slot:prop="slotProps" 等价于 slot="prop" slot-scope="slotProps" 就写法上来讲，这样写方便点v-slot识别不了，slot没有影响）
送码官方微信
手机访问领取大礼包