vue插槽-2.6.0前后版本使用对比

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">
        <!--v-slot:sub-title 可简写为 #sub-title-->
        <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可以用#简写
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没有影响）
官方文档

vue插槽-2.6.0前后版本使用对比

1、代码

2、界面效果

3、使用总结

推荐阅读更多精彩内容