插槽slot

已于 2022-02-14 10:31:19 修改
阅读量216 收藏
点赞数
分类专栏： VUE 文章标签： vue.js 前端
于 2022-02-13 13:32:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46112274/article/details/122907734
版权

1、为什么使用插槽

组件的插槽是为了让组件更具有扩展性
在这里插入图片描述

2、如何封装这类组件

在这里插入图片描述

3、插槽的基本使用

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <!-- 
    1、插槽的基本使用<slot></slot>
    2、插槽的默认值<slot>button</slot>
    3、如果有多个值，同时插入到组件进行替换时，这些值会一起作为替换元素
  -->
  <div id="app">
    <cpn></cpn>
    <cpn>
      <p>哈哈哈哈</p>
      <span>嘿嘿</span>
      <p>我是按钮</p>
    </cpn>
    <cpn><p>hhhhhhhh</p></cpn>
    <cpn></cpn>
    <cpn></cpn>
    <cpn></cpn>
  </div>
  <template id="cpn">
    <div>
      <h1>标题</h1>
      <h1>内容</h1> 
      <slot><button>我是按钮</button></slot>
    </div>
  </template>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message:'你好'
      },
      methods: {
      },
      components:{
        cpn: {
          template: '#cpn'
        }
      }
    })
  </script>
</body>

</html>

4、具名插槽的使用

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  
  <div id="app">
    <cpn><span slot="left">左标题</span></cpn>
    <cpn><button slot="right">返回</button></cpn>
  </div>
  <template id="cpn">
    <div>
      <slot name="left"><span>左边</span></slot>
      <slot name="center"><span>中间</span></slot>
      <slot name="right"><span>右边</span></slot>
    </div>
  </template>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message:'你好'
      },
      methods: {
      },
      components:{
        cpn: {
          template: '#cpn'
        }
      }
    })
  </script>
</body>

</html>

在这里插入图片描述

在这里插入图片描述

5、编译作用域的概念

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  
  <div id="app">
    <cpn v-show= "isShow"></cpn>
  </div>
  <template id="cpn">
    <div>
      <h2>标题</h2>
    </div>
  </template>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message:'你好',
        isShow: true
      },
      methods: {
      },
      components:{
        cpn: {
          template: '#cpn',
          data(){
            return{
              isShow:false
            }
          }
        },
      }
    })
  </script>
</body>

</html>

在这里插入图片描述

在这里插入图片描述

6、作用域插槽的使用

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <cpn></cpn>
    <cpn>
      <!-- 目的是获取子组件中的planguages -->
      <template slot-scope="slot">
        <span>{{slot.data.join(' * ')}}</span>
      </template>
    </cpn>
    <cpn>
      <!-- 目的是获取子组件中的planguages -->
      <template slot-scope="slot">
        <span>{{slot.data.join(' - ')}}</span>
      </template>
    </cpn>
  </div>
  <template id="cpn">
    <slot :data="pLanguages">
      <ul>
        <li v-for="item in pLanguages">{{item}}</li>
      </ul>
    </slot>
  </template>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message:'你好',
      },
      methods: {
      },
      components:{
        cpn: {
          template: '#cpn',
          data(){
            return{
              pLanguages:['Java','Python','Swift','Go','c++','c#','JaaScript']
            }
          }
        },
      }
    })
  </script>
</body>

</html>

在这里插入图片描述在这里插入图片描述

在这里插入图片描述

小码哥呀
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue插槽slot的简单理解与用法实例分析
01-21
本文实例讲述了vue插槽slot的简单理解与用法。分享给大家供大家参考，具体如下： vue中插槽的使用非常广泛，本文就插槽的使用和理解简单总结。 从字面理解插槽是预先插入一个代码空间，用于后期塞入数据。 插槽分类 ...
Cisco Wireless中显示的slot0, slot1是什么含义
funnycoffee123的博客
10-01 3416
slot0= 802.11b,g,n slot1=802.11a,n,ac. https://www.cisco.com/c/en/us/td/docs/wireless/controller/ewc/17-2/config-guide/ewc_cg_17_2/cisco_flexible_radio_assignment.html
Vue-几种插槽(slot)的使用
见证自己学习,成长的记录
06-22 1万+
作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件 ===> 子组件。
vue系列之 插槽(Slot) 详解
最新发布
共同学习，共同成长
05-28 2477
插槽在vue中是一种很常见的写法，让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式。一共有三种分类：默认插槽、具名插槽、作用域插槽，下面一一根据案例改造说明。
细致讲解slot插槽的使用
五花漏的博客
11-19 2万+
彻底搞懂slot插槽，图文详解1、什么是插槽Vue 实现了一套内容分发的 API，将 `` 元素作为承载分发内容的出口。插槽实质是对子组件的扩展，通过``插槽向组件内部指定位置传递内容。slot的出现是为了父组件可以堂而皇之地在子组件中加入内容。插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制。2、slot 与 props 的区别3、插槽的使用（1）匿名插槽（单个插槽、默认插槽）（2）具名插槽（3）作用域插槽因为父级模板里的所有内容都是在父级作用域中编译的；子级模板里的所有内容
slot的详解和使用（三分钟清晰理解）
常来常往，共同成长
01-03 3031
在HTML中slot元素 ，作为Web Components技术套件的一部分，是Web组件内的一个占位符,该占位符可以在后期使用自己的标记语言填充
Vue 中 slot 是什么？作用？分类？如何实现？
小草莓的博客
11-15 8406
插槽 — Vue.js插槽 Slots | Vue.js在 Vue2.6.0 之后，使用v-slot或者语法糖#插槽名定义；在这之前使用slot="插槽名"定义。跟 v-on 和 v-bind 一样，v-slot 也有缩写，也就是把参数之前的所有内容(v-slot:) 替换为字符 #；下面是三种默认插槽的内容定义方式，并且最后一个默认插槽的内容会覆盖掉上一个插槽内容。使用 template 包裹内容，同时使用 v-slot 绑定一个名称。
vue插槽slot学习.xmind
05-29
vue插槽slot学习.xmind
使用react context 实现vue插槽slot功能
01-21
组件，具名插槽name定义以及默认插槽 <slot name=header></slot> <slot></slot> <slot name=footer></slot> 提供内容渲染的组件 <base-layout> <h1>Here might be a
【转载】Vue 插槽（slot）详细介绍（对比版本变化，避免踩坑）
hcb1998的博客
04-28 1553
Vue中的插槽（slot）在项目中用的也是比较多的，今天就来介绍一下插槽的基本使用以及Vue版本更新之后的插槽用法变化。在 2.6.0 中，为具名插槽和作用域插槽引入了一个新的统一的语法 (即v-slot指令)。它取代了slot和slot-scope这两个目前已被废弃但未被移除且仍在文档中的 attribute。新语法的由来可查阅这份RFC。注意slot版本变化，vue2中仍可以使用slot与slot-scope，但是vue3只能使用v-slot了，切记，避免踩坑。
插槽slot的使用
qq_46030883的博客
11-02 2520
Vue slot的使用 一、什么是slot 在子组件中，使用特殊的元素就可以为子组件开启一个插槽 该插槽插入什么内容取决于父组件如何使用 二、插槽的基本使用 在子组件中使用为子组件开启一个插槽 <template> <div class="hello"> 这是子组件内部！ <slot></slot> </div> </template> 在父组件中使用该组件，并为slot填充内容 <template
slot插槽的简单理解
m0_65361801的博客
06-13 4365
是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。自己理解为一个占位符，当需要用时可以定义一个slot，不需要用时slot，页面上也不会有痕迹。插槽显不显示是由父盒子决定的，插槽在哪个位置上显示是由子组件决定的。子组件 父组件 这个时候，在调用子组件的地方，如果我们写了内容如：asd，(写什么都可以)没写内容的也不影响显示，就没了内容而言具名插槽理论上可以有无数个，可以根据实际su'y父组件 子组件 作用
Vue系列之插槽（slot）详解
热门推荐
老__L的博客
03-01 4万+
插槽（Slot）是 Vue 提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制其实就是在子组件中定义插槽时，给对应的插槽分别起个名字，方便后边插入父组件将根据name来填充对应的内容。作用域插槽就是实现在子组件自行决定自己要显示什么内容动态指令参数也可以用在 v-slot 上，来定义动态的插槽名
插槽（slot）的基本使用
weixin_66375317的博客
05-09 1万+
插槽（slot）的基本使用
插槽Slot的作用和基本使用；具名插槽的使用；作用域插槽Slot使用；全局事件总线使用；依赖注入Provide/Inject
qq_54075517的博客
08-14 1014
插槽Slot的作用和基本使用；具名插槽的使用；作用域插槽Slot使用；全局事件总线使用
Vue中的slot插槽
qq_50582468的博客
04-02 1331
但是为了让这个组件具备更强的通用性，我们不能将组件中的内容限制为固定的标签元素；例如某种情况下我们使用组件，希望组件显示的是一个视频，一张图片或按钮，插槽可以让使用者灵活的决定组件内某一块区域中放什么内容。插槽可以提供一个默认内容，如果父组件没有为这个插槽提供内容，会显示默认的内容。slot具有“占坑”的作用，在子组件占好了位置，那父组件使用该子组件标签时，新添加的DOM元素就会自动填到这个坑里面。slot没有指定name属性值的时候显示一个默认插槽，一个组件内只有一个默认插槽。（3）slot插槽的分类。
vue的slot插槽详解
m0_64590669的博客
12-18 1404
vue的slot插槽详解
一文详解Vue插槽slot的使用与案例展示，看完就彻底明白了
czjl6886的博客
12-23 8047
目录 一、插槽的含义 二、插槽的三种使用方法 1.默认插槽 2.具名插槽 3.作用域插槽 4.版本变化 插槽slot在实际的项目开发中是经常使用的，主要分为三大类：默认插槽、具名插槽和作用域插槽，也是比较容易上手的。 一、插槽的含义 插槽slot是写在子组件的代码中，供父组件使用的占位符。在代码中，大致写为如下的形式，后面会进行详细的写法介绍。 <slot> </slot> 插槽其实就是在写slot的地方挖个坑，等着组件的使用者，即父组...
插槽 Slots详解（看了不懂我陪）
weixin_51225684的博客
08-09 2033
插槽是什么？ 插槽就是子组件中的提供给父组件使用的一个占位符，用 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。简单理解就是子组件中留下个“坑”，父组件可以使用指定内容来补“坑”。举例来说，这里有一个 组件，可以像这样使用： 而 的模板是这样的： 元素是一个插槽出口 (slot outlet)，标示了父元素提供的插槽内容 (slot content) 将在哪里被渲染。 最终渲染出的 DOM
Vue组件化：插槽Slot与非父子通信详解
在Vue组件化开发中，"08_组件化-插槽Slot和非父子通信.pptx"文档详细介绍了组件化设计的关键特性——插槽（Slot）以及非父子组件间的通信机制。插槽是Vue.js提供的一种强大工具，用于增强组件的灵活性和重用性，允许...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值