vue中slot插槽的用法

最新推荐文章于 2023-11-15 11:01:56 发布

晓明的日常操作

最新推荐文章于 2023-11-15 11:01:56 发布

阅读量228

点赞数

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

本文链接：https://blog.csdn.net/wangming2531/article/details/108893099

版权

vue 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

1.什么是插槽？
slot插槽：在模板中保留位置，使用的时候可以扩展
slot取name值
在占位符中 slot=“name值”
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            main{
                background-color: #5187ff;
            }
			div{
			   margin-top:50px;
			}
        </style>
    </head>
    <body>
        <div id="app">
            <v-header><!--占位符 -->
                <div slot="logo">
                    <img src="https://mat1.gtimg.com/www/mobi/2017/image/ui-icon_log.svg" alt=""><!--要插入插槽里面的的图片 -->
                    <a href="#">推荐频道</a><!--要插入插槽里面的的文字 -->
                </div>
            </v-header>

            <v-header><!--占位符 -->
                <div slot="logo">
                    <img src="https://mat1.gtimg.com/www/mobi/2017/image/logo-text-whitetext_v2.svg" alt=""><!--要插入插槽里面的的图片 -->
                </div>
            </v-header>
        </div>

        <template id="header"><!--定义模板 -->
            <main>
                <slot name="logo"></slot>
                <div>
                    <img src="https://mat1.gtimg.com/rain/bailing20/5454a2d663ae.icon_task_coin.svg" alt="">
                    签到
                </div>
                
            </main>
        </template>

        <script src="js/vue.js"></script>
        <script>
            new Vue({
                el:'#app',
                components:{
               // k:v  k代表的是占位符，v代表的是组件名字
                    'v-header':{
                        template:'#header'
                    }
                }
            })
        </script>
    </body>
</html>

晓明的日常操作

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中slot插槽的用法

1.什么是插槽？slot插槽：在模板中保留位置，使用的时候可以扩展slot取name值在占位符中 slot=“name值”<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
复制链接

扫一扫