Vue.js——slot-插槽的基本使用——2020.12.7

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

Blockchain_KT

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

阅读量1.3k

点赞数 2

分类专栏： Vue.js-实战开发文章标签： vue html js app java

本文链接：https://blog.csdn.net/weixin_43402353/article/details/110846803

版权

Vue.js-实战开发专栏收录该内容

64 篇文章 46 订阅

订阅专栏

本文介绍了Vue中插槽(slot)的基本使用，阐述了为何在组件封装中使用插槽以增强扩展性。通过举例说明，如在移动网站导航栏组件的封装中，如何通过插槽让使用者自定义内容，例如决定是显示搜索框、文字还是菜单。并提供了一个简单的案例代码，展示了如何在组件中定义和使用插槽，以及代码的运行结果。

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

slot-插槽的基本使用

一丶为什么使用slot

（一）slot翻译为插槽

在生活中很多地方都有插槽，电脑的USB插槽，插板当中的电源插槽
插槽的目的是让我们原来的设备具有更多的扩展性
比如电脑的USB我们可以插入U盘，硬盘，手机，音响，键盘，鼠标等

（二）组件的插槽

组件的插槽也是为了让我们封装的组件更具有扩展性
让使用者可以决定组件内部的一些内容到底展示什么

（三）例子：移动网站中的导航栏

移动开发中，几乎每个页面都有导航栏
导航栏我们必然会封装成一个插件，比如nav-bar组件
一旦有了这个组件，我们就可以在多个页面中复用

二丶如何封装这类插件呢？slot

（一）如何去封装这类的组件呢？

它们也很多区别，但是也有很多共性
如果，我们每一个单独去封装一个组件，显然不合适
比如每个页面都返回，这部分内容我们就要重复去封装
但是，如果我们封装成一个，好像也不合理
有些左侧是菜单，有些是返回，有些中间是搜索，有些事文字等等

（二）如何封装合适呢？抽取共性，保留不同

最好的封装方式就是将共性抽取到组件中，将不同暴露为插槽
一旦我们预留了插槽，就可以让使用者根据自己的需求，决定插槽中插入什么内容
是搜索框，还是文字，还是菜单，由调用者自己来决定

（三）这就是使用slot的意义所在

三丶案例代码

<!--作者：key-->
<!--浏览工具：Chrome-->
<!--开发工具：WebStorm-->
<!--开发时间：2020/12/4 10:07-->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--1.插槽的基本使用，<slot></slot>-->
<!--2.插槽的默认值 <slot>button</slot>-->
<!--3.如果有多个值，同时放入到组件进行替换时，一起作为替换元素-->
<div id="app">
  <cpn>
    <button>按钮</button>
  </cpn>
  <cpn>
    <i>呵呵呵</i>
    <div>我是DIV元素</div>
    <p>我是段落</p>
  </cpn>
  <cpn></cpn>
</div>

<template id="cpn">
  <div>
    <h2>我是key</h2>
    <p>我是内容</p>
    <slot></slot>
    <hr>
  </div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  const app = new Vue({
    el:"#app",
    data:{

    },
    components:{
      cpn:{
        template:'#cpn'
      }
    }
  })
</script>
</body>
</html>

四丶运行结果

在这里插入图片描述

——仰天大笑出门去，我辈岂是蓬蒿人——

Blockchain_KT

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
20
评论
Vue.js——slot-插槽的基本使用——2020.12.7

一丶为什么使用slot（一）slot翻译为插槽在生活中很多地方都有插槽，电脑的USB插槽，插板当中的电源插槽插槽的目的是让我们原来的设备具有更多的扩展性比如电脑的USB我们可以插入U盘，硬盘，手机，音响，键盘，鼠标等（二）组件的插槽组件的插槽也是为了让我们封装的组件更具有扩展性让使用者可以决定组件内部的一些内容到底展示什么（三）例子：移动网站中的导航栏移动开发中，几乎每个页面都有导航栏导航栏我们必然会封装成一个插件，比如nav-bar组件一旦有了这个组件，我们就可以在多个页面
复制链接

扫一扫