vue 基础教程（七） vue进阶: 插槽 slot 具名slot 过渡

最新推荐文章于 2024-07-26 13:02:41 发布

小白追梦

最新推荐文章于 2024-07-26 13:02:41 发布

阅读量244

点赞数

分类专栏： vue 文章标签： vue javascript

本文链接：https://blog.csdn.net/weixin_43815680/article/details/109062088

版权

vue 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

本文深入探讨Vue的插槽 Slot 功能，包括具名插槽的使用，以及Vue中的过渡效果实现，如单元素、多个元素和列表过渡，详细解释了如何通过key值来控制元素复用。

摘要由CSDN通过智能技术生成

1 vue进阶: 插槽 slot

在这里插入图片描述
2)

更加动态的显示内容而不是将内容写固定住

<html>

<head>
    <title>test</title>
    <meta charset="utf-8" />
    <style></style>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<body>
    <div id="box">
        <child>
           aaaaaa
        </child>
        <swiper>
            <li v-for="data in datalist">
                {{data}}
            </li>
        </swiper>
    </div>
</body>

<script>
    var vm = new Vue({
        el: "#box",
        data: {
            datalist: ['111', '222', '333'],
        },
        components: {
            child: {
                template: `
                <div>
                <slot></slot>
                 
                </div>
                `
            },
            swiper: {
                template: `
                <div>
                <ul>
                <slot></slot>
                </ul>
                </div>
                `
            }
        },

    })
</script>

</html>

3）
简化一下之前点击隐藏的功能

<html>

<head>
    <title>test</title>
    <meta charset="utf-8" />
    <style></style>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<body>
    <div id="box">
        <navbar>
            <button @click="isShow=!isShow">click</button>
        </navbar>
        <swiper>
            <li v-for="data in datalist" v-show="isShow">
                {{data}}
            </li>
        </swiper>
    </div>
</body>

<script>
    var vm = new Vue({
        el: "#box",
        data: {
            isShow: false,
            datalist: ['apple', 'banana'],
        },
        components: {
            navbar: {
                template: `
                <div>
                navbar
                <slot></slot>
                 
                </div>
                `
            },
            swiper: {
                template: `
                <div>
                <ul>
                <slot></slot>
                </ul>
                </div>
                `
            }
        },

    })
</script>

</html>

这个就可以完美实现主要看第一个组件的部分

2 p40 具名slot

具有名字的插槽可将具体的插槽放到特定的位置
在这里插入图片描述

3 过渡

在这里插入图片描述
1）
单元素
先实现一个可以点击后隐藏和显示内容的按钮
这个很简单

<html>

<head>
    <title>test</title>
    <meta charset="utf-8" />
    <style></style>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<body>
    <div id="box">
        <button @click="isShow=!isShow">click</button>
        <div v-show="isShow">11111</div>
    </div>
</body>
<script>
    var vm = new Vue({
        el: "#box",
        data: {
            isShow: false,
        },
    })
</script>


</html>

接下来加一些动画的样式 第一种使用vue 命名方式的过渡动画

<html>

<head>
    <title>test</title>
    <meta charset="utf-8" />
    <style>
        /* 这个地方前面的变量是随便起的 但是后面的-enter-active这种固定 */
        .fhj-enter-active,
        .fhj-leave-active {
            /* 进场和出场的时间是1.5s */
            transition: all 1.5s;
        }

        .fhj-enter,
        .fhj-leave-to {
            /* 元素的默认状态 opacity:1,translate: 0; */
            opacity: 0;
            transform: translateX(100px);
        }
    </style>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<body>
    <div id="box">
        <button @click="isShow=!isShow">click</button>
        <!-- 使用transition标签将样式加在需要显示的元素上 -->
        <transition name="fhj">
            <div v-show="isShow">11111</div>
        </transition>

    </div>
</body>
<script>
    var vm = new Vue({
        el: "#box",
        data: {
            isShow: false,
        },
    })
</script>


</html>

再使用第二种 css3 加动画关键帧的方式

<html>

<head>
    <title>test</title>
    <meta charset="utf-8" />
    <style>
        /* .5s 表示 0.5s时间内进场和出场 */
        .fhj-enter-active {
            animation: bounce-in .5s;
        }

        .fhj-leave-active {
            animation: bounce-in .5s reverse;
        }

        /* 这个地方是两个状态的变化 0-100 100-0 */
        @keyframes bounce-in {
            0% {
                opacity: 0;
                transform: translateX(100px);
            }

            100% {
                opacity: 1;
                transform: translateX(0px);
            }
        }
    </style>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<body>
    <div id="box">
        <button @click="isShow=!isShow">click</button>
        <!-- 使用transition标签将样式加在需要显示的元素上 -->
        <transition name="fhj">
            <div v-show="isShow">css3 关键帧动画效果</div>
        </transition>

    </div>
</body>
<script>
    var vm = new Vue({
        el: "#box",
        data: {
            isShow: false,
        },
    })
</script>


</html>

2）多个元素过渡

动画效果消失
diff算法同标签对比只是做了内容的更改没有创建新的
在这里插入图片描述
那么如果将两个标签改成不一样的呢？
这样diff 在对比的时候会认为两个标签内容发生很大变化动画会起作用
会删掉之前的节点

那么我们如果 还是要使用两个相同的标签呢？
diff算法另外一个原则是 key值相同则复用 key值不同则会把之前的干掉换成新的
那么我们可以使得key值不一样 可以实现动画效果