（VueJs）插槽slot

最新推荐文章于 2023-02-04 22:10:39 发布

黑胡子大叔的小屋

最新推荐文章于 2023-02-04 22:10:39 发布

阅读量422

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/lzl980111/article/details/104761825

版权

前端专栏收录该内容

75 篇文章 0 订阅

订阅专栏

为啥引入插槽slot这种东西

方便组件的复用，增强组件的可扩展性（太笼统）
直接上栗子
在这里插入图片描述

以京东为例，它的nav-bar大同小异，存在很多共性；如果我们都是单独去定义一个组件，显然不合适；比如每个页面都返回，这部分内容我们就需要重新封装，资源浪费；最好的封装方式就是将共性抽取到组件中，不同的设置为插槽。

应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <cpn><button>按钮</button></cpn>
    <cpn><h2>世界</h2></cpn>
</div>
<template id="tp">
    <div>
        <h2>你好</h2>
        <slot></slot>
    </div>
</template>
<script src="../../js/vue.js"></script>
<script>
    const cpn1=Vue.extend({
        template:'#tp'
    })
    const app=new Vue({
        el:'#app',
        data:{

        },
        components:{
            cpn:cpn1
        }
    })
</script>
</body>
</html>

运行：
在这里插入图片描述
组件插槽的定义：添加slot标签

<template id="tp">
    <div>
        <h2>你好</h2>
        <slot></slot>
    </div>
</template>

插槽的使用：

    <cpn><button>按钮</button></cpn>
    <cpn><h2>世界</h2></cpn>

在组件使用的时候添加相应html代码

插槽的具名 :插槽的命名：slot标签中的name属性，插槽的选用：相应标签添加slot属性指明插槽名。增强了插槽的利用性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <cpn><h2 slot="slot2">世界</h2></cpn>
</div>
<template id="tp">
    <div>
        <h2>你好</h2>
        <slot name="slot1"><p>默认插槽1</p></slot>
        <slot name="slot2"><p>默认插槽2</p></slot>
        <slot name="slot3"><p>默认插槽3</p></slot>
    </div>
</template>
<script src="../../js/vue.js"></script>
<script>
    const cpn1=Vue.extend({
        template:'#tp'
    })
    const app=new Vue({
        el:'#app',
        data:{

        },
        components:{
            cpn:cpn1
        }
    })
</script>
</body>
</html>

在这里插入图片描述

小记

我发现在template内部最外层加一个div是必不可少的，否则会出错的。

黑胡子大叔的小屋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（VueJs）插槽slot

为啥引入插槽slot这种东西方便组件的复用，增强组件的可扩展性（太笼统）直接上栗子以京东为例，它的nav-bar大同小异，存在很多共性；如果我们都是单独去定义一个组件，显然不合适；比如每个页面都返回，这部分内容我们就需要重新封装，资源浪费；最好的封装方式就是将共性抽取到组件中，不同的设置为插槽。应用<!DOCTYPE html><html lang="en"&g...
复制链接

扫一扫

专栏目录