vue 2.6.0 中, 为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令). 它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的 attribute. 新语法的由来可查阅这份 RFC.
在接下来所有的 2.x 版本中 slot 和 slot-scope attribute 仍会被支持, 但已经被官方废弃且不会出现在 Vue 3 中
本文基于以上背景, 研究 v-slot 和 slot 和 slot-scope 使用上的区别.
1, 代码
- <!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>
2, 界面效果
界面效果
3, 使用总结
v-slot:prop 等价于 slot="prop"
v-slot:prop="slotProps" 等价于 slot="prop" slot-scope="slotProps"
就写法上来讲, 这样写方便点
v-slot 指令只能用在 template 或组件中
v-slot 指令后面跟 prop 若出现多个同类插槽 仅生效最后一个. 不添加 v-slot 指令, 都生效 (属于默认插槽 < slot></slot>)
2.6.0 之前的版本 插槽 可以出现多个同类的插槽. 插槽可以在 component,template,dom 使用
如果在 dom 元素里使用指令 prop 最好使用 kebab-case, 大小写识别不出 (
v-slot 识别不了, slot 没有影响
)
官方文档
来源: http://www.jianshu.com/p/be5d41179e78