学习笔记Vue（十二）—— v-slot 插槽

最新推荐文章于 2023-05-22 18:30:01 发布

GRANDMA_Z

最新推荐文章于 2023-05-22 18:30:01 发布

阅读量2.1k

点赞数 1

分类专栏： Vue学习文章标签： Vue JavaScript

本文链接：https://blog.csdn.net/qq_38932377/article/details/95239061

版权

Vue学习专栏收录该内容

24 篇文章 0 订阅

订阅专栏

v-slot可以将components标签里面的文字内容替换到指定的位置。
用文字叙述不太清楚，还是用特定的场景来描述吧。
比如你有一个button组件，你想让他根据不同的需求显示不同的文字，使他的可复用性更高：

<body>
    <!-- v-slot 插槽 -->
    <!-- 简写 # -->
    <div id="app">
    	<!-- 想根据组件标签里的内容来显示我的button -->
        <my-button type="success">成功按钮</my-button>
    </div>

    <script>
        const vm = new Vue({
            el: '#app',
            components:{
                myButton:{
                    props: ['type'],
                    //使用slot标签，文字会替换到slot标签的位置
                    template:`<button class="my-button" :class="type">
                            <slot></slot> 
                        </button>`
                }
            }
        });
    </script>
</body>

效果：
在这里插入图片描述
slot标签还可以有一个name属性，可以在template标签上用v-slot：name指令将内容替换到固定name值的slot标签上，
==v-slot可简写为一个井号 # ==

<body>
    <!-- v-slot 插槽 -->
    <!-- 简写 # -->
    <div id="app">
        <my-button type="success">成功按钮 
            <template v-slot:right>
                success
            </template>
        </my-button>
    </div>

    <script>
        const vm = new Vue({
            el: '#app',
            components:{
                myButton:{
                    props: ['type'],
                    template:`<button class="my-button" :class="type">
                            <slot></slot>
                            -------------
                            <slot name="right"></slot>
                        </button>`
                }
            }
        });
    </script>
</body>

效果：
在这里插入图片描述

GRANDMA_Z

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
学习笔记Vue（十二）—— v-slot 插槽

v-slot可以将components标签里面的文字内容替换到指定的位置。用文字叙述不太清楚，还是用特定的场景来描述吧。比如你有一个button组件，你想让他根据不同的需求显示不同的文字，使他的可复用性更高：<body>   <div id="app"> ...
复制链接

扫一扫