Vue2，带你彻底看懂插槽的常见四种出现方式

最新推荐文章于 2024-07-24 11:23:31 发布

玛卡巴卡的造

最新推荐文章于 2024-07-24 11:23:31 发布

阅读量1.2k

点赞数

分类专栏： Vue2 文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/qq_45188736/article/details/123409600

版权

Vue2 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

Vue2，带你彻底看懂插槽的常见四种出现方式

插槽是做什么的

首先我们得知道使用插槽是做什么得，试用于什么样得场景。

<body>
    <div id="app">
        <mynav>
        </mynav>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <template id="mynav">
        <div>
         插槽的使用场景
        </div>
    </template>
</body>
<script>

let mynav={
    template:'#mynav'
}

const app=new Vue({
    el:'#app',
    components:{
        mynav
    }

这里是我们简单的注册一个组件并让他显示。效果如下，一切正常。
在这里插入图片描述
此时如果我想要该组件中新增其他内容会发现无法显示。原因很简单是因为我们组件在书写模板的过程中只写了一段话没有写其他任何东西。我们尝试一下，在下方添加内容，效果图如下。

    <div id="app">
        <mynav>
        <h1>我是一个新内容</h1>
        </mynav>
    </div>

在这里插入图片描述
没有任何的变化。

这时候我们就需要在组件中使用插槽，这就像是设定了一个坑位，可以接收写的标签和元素。我们在mynav模板里增加一个插槽试一下。

 <template id="mynav">
        <div>
         插槽的使用场景
         <slot></slot>
        </div>
    </template>

我们再来看效果图。
在这里插入图片描述
内容显现了出来。显然插槽的作用就是为了接收注册后的组件使用时新增的标签。给他们一个位置一个坑位去接收他们。

插槽的分类

通过上面的简单介绍我们知道了插槽的使用背景现在我们来看常见的几种插槽形式。分别是匿名插槽、具名插槽、作用域插槽、作用域插槽配合template的使用。

匿名插槽

匿名插槽的书写方式 <slot></slot>
上代码：

<body>
    <div id="app">
        <mynav>
            <h1>我是匿名插槽</h1>
             <h2>我也是</h2>
        </mynav>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <template id="mynav">
        <div>
    <slot></slot>
        </div>
    </template>
</body>
<script>

let mynav={
    template:'#mynav'
}

const app=new Vue({
    el:'#app',
    components:{
        mynav
    }
})
</script>

在这里插入图片描述

具名插槽

具名插槽的书写方式组件中：<slot name='名字'></slot> html标签中slot='名字'
上代码：

<body>
    <div id="app">
        <mynav>
            <h1 slot="h1">我是具名插槽</h1>
            <h2>我没有命名</h2>
        </mynav>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <template id="mynav">
        <div>
    <slot name="h1"></slot>
        </div>
    </template>
</body>
<script>

let mynav={
    template:'#mynav'
}

const app=new Vue({
    el:'#app',
    components:{
        mynav
    }
})
</script>

在这里插入图片描述

作用域插槽，匿名插槽获取数据

作用域插槽获取匿名插槽时的数据前端标签书写：v-slot="自定义对象名" 组件中书写：<slot></slot>
组件中可以通过插槽自定义属性去传递给html中的标签。
上代码：

  <div id="app">
        <mynav v-slot="scope" >
            <h1>我是作用域插槽,匿名 ---{{scope.count}}</h1>
        </mynav>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <template id="mynav">
        <div>
    <slot :count="count"></slot>
        </div>
    </template>
</body>
<script>

let mynav={
    template:'#mynav',
    data(){
        return{
            count:100
        }
    }
}

const app=new Vue({
    el:'#app',
    components:{
        mynav
    },
 
})
</script>

在这里插入图片描述
注意：这里必须时匿名插槽否则无法传递数据，html标签中的自定义对象可以随意书写，他的值决定于组件传递的值

作用域插槽，具名插槽获取数据

作用域插槽获取具名插槽时的数据前端标签书写：#名字="自定义对象名" 组件中书写：<slot name='名字' ></slot>
组件中可以通过插槽自定义属性去传递给html中的标签。
上代码：

<body>
    <div id="app">
        <mynav>
            <!-- 
                v-slot:可以简写为#
                所以这句话等价于 #h1="scope"  这是非常常见的插槽使用方法 h1是插槽的名称所以在使用UI组件的时候我们可以阅读文档上面的slot插槽是我们可以使用的插槽名称，后面的变量自己随便起即可。
             -->
            <template v-slot:h1="scope">
                <div>
                    <h1>我是作用域插槽,具名 ---{{scope.count}}</h1>
                </div>
            </template>
      
        </mynav>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <template id="mynav">
        <div>
    <slot :count="count" name="h1"></slot>
        </div>
    </template>
</body>
<script>

let mynav={
    template:'#mynav',
    data(){
        return{
            count:100
        }
    }
}

const app=new Vue({
    el:'#app',
    components:{
        mynav
    },
 
})
</script>

在这里插入图片描述

注意：在平常使用中#的频率更高，这里是对具名插槽作用域的使用，做好和上面的区分。在UI组件库中我们常常在文档中看到，注意插槽名字再使用’'

玛卡巴卡的造

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue2，带你彻底看懂插槽的常见四种出现方式

Vue2，带你彻底看懂插槽的常见四种出现方式插槽是做什么的首先我们得知道使用插槽是做什么得，试用于什么样得场景。<body> <div id="app"> <mynav> </mynav> </div> <script src="./node_modules/vue/dist/vue.js"></script> <template id="mynav
复制链接

扫一扫

专栏目录