插槽

插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性。

个人理解:我感觉插槽就是父组件控制插槽的内容。他是用什么标签展示的,以及他要展示的内容。子组件来控制插槽插入的位置。

插槽的分类:插槽分为三种。匿名插槽,具名插槽,还有作用域插槽

匿名插槽:也就是默认插槽。把父组件中的内容默认插入到子组件的中<slot></slot>只的位置。

下面是展示在页面中的效果

具名插槽: 具名插槽会把就是子组件会把他的每个插槽都赋予一个名字(name)。然后子组件会根据父组件中所携带的指令参数来把父组件中的内容插入到相应的位置。

如果slot插槽没有给名字,那么这个插槽就相当于默认插槽,父组件中v-slot不传参的值就会插入到这里。

// 这是父组件
<div class="father">
<p>我是父组件</p>
<!-- 引入子组件 -->
<basepage>
<template v-slot:header>
<!-- 放入要插入在子组件中的内容 -->
<p class="con">我是父组件插入的header内容</p>
<br>
</template>
<template v-slot:footer>
<!-- 放入要插入在子组件中的内容 -->
<p class="con">我是父组件插入的footer内容</p>
</template>
<P>我是父组件中不携带参数的那个</P>
<br>
</basepage>
</div> //这是子组件   <template>
  <div class="son">
  <p>我是子组件</p>
  <br>
  <p>下面是父组件插入的内容:</p>
  <br>
  <template>
  <!-- v-slot中参数为header的将插入这里 -->
  <slot name="header"></slot>
  <!-- 父组件中不传递参数的将插入这里 -->
  <slot ></slot>
  <!-- v-slot中参数为footer的将插入这里 -->
  <slot name="footer"></slot>
  </template>
  </div>
  </template>

展示的效果

作用域插槽:实现父组件可以访问子组件里面的数据

用通俗的话来讲就是父组件替换子组件当中的标签,但是内容由子组件来提供。

// 父组件哈
<div class="father">
<p>我是父组件</p>
<!-- 引入子组件 -->
<basepage>
<template v-slot='news'>
<!-- 放入要插入在子组件中的内容 -->
<p class="con">我是父组件插入的footer内容</p>
<br>
<p>我是子组件中的内容:{{news.info}}</p>
</template>
</basepage>
</div> // 子组件
<template>
<div class="son">
<p>我是子组件</p>
<br>
<p>下面是父组件插入的内容:</p>
<br>
<template>
<slot :info='message'></slot>
</template>
</div>
</template>
<script>
export default {
name:'basepage',
data() {
return {
message:"加油呀"
}
}
}

补充一些特殊的情况

补充一:我们可以在子组件中的slot中写入一些标签,如果父组件中没有写入标签时,那么就默认展示子组件中的把标签及内容,

// 父组件
<div class="father">
<p>我是父组件</p>
<!-- 引入子组件 -->
<basepage>
</basepage>
</div> // 子组件 <template>
<div class="son">
<p>我是子组件</p>
<br>
<p>下面是父组件插入的内容:</p>
<br>
<template>
<P>今天很开心啊,嘻嘻</P>
</template>
</div>
</template>

补充二:v-slot在有插槽名字的情况下可以简写为#,在没有插槽的情况下不能这么写哈。

<!-- 这样会触发一个警告 -->
<current-user #="{ user }">
{{ user.firstName }}
</current-user>
如果你希望使用缩写的话,你必须始终以明确插槽名取而代之: <current-user #default="{ user }">
{{ user.firstName }}
</current-user>

补充三:关于作用域插槽和具名插槽放一块的写法。

// 这是父子组件中引入的子组件
<div >
<p>我是父组件</p>
<children>
      // 直接在名字后面附上绑定的值就好
      <template v-slot:fagognzi='content'>
<!-- 按钮 -->
<div v-if="rendWage(content.item, content.index)">
<el-button type="danger" size="small" plain round @click="onPaysendWage(content.item)">发工资</el-button>
</div>
</template> </children>

插槽的分享就到这里了,希望大家能有一些收获哈,也请大神们多多指教。

vue学习之插槽的更多相关文章

  1. Vue学习笔记-插槽基本使用

    为了让我们的组件更加具有扩展性,可以使用插槽 <div id="app"> <cpn> <span>返回</span> <in ...

  2. Vue学习之--------插槽【默认插槽、具名插槽、作用域插槽】(2022/8/30)

    插槽Vue.js官网介绍:https://vuejs.org/guide/components/slots.html 会牵涉到template的用法.占位.实际不渲染到页面中 1.默认插槽: 1.1 ...

  3. Vue学习笔记:Slot

    转自:https://www.w3cplus.com/vue/vue-slot.html 在Vue中,slot也分多种,从Vue的官网中可以获知,其主要分为:单个插槽.具名插槽和作用域插槽三种 父组件 ...

  4. Vue 学习文档

    Vue 学习文档 vue 起步 引包 启动 new Vue(options) options: el 目的地(可以用类名.标签名等,也可以直接用mod元素) #elementId .elementCl ...

  5. day 82 Vue学习三之vue组件

      Vue学习三之vue组件   本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给 ...

  6. Vue学习笔记-Vue.js-2.X 学习(三)===>组件化高级

    (四) 组件化高级 1.插槽(slot)的基本使用 A:基本使用: <slot></slot> B:默认置:<slot><h1>中间可以放默认值< ...

  7. Vue学习笔记-2

    前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变 ...

  8. Vue学习笔记-1

    前言 本文不是Vue.js的教程,只是一边看官网Vue的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记. 1.vue和avalon一样,都不支持VM初始时不存在的属性 而在Angular里 ...

  9. Vue学习记录第一篇——Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

随机推荐

  1. 快学Scala 第三课 (定长数组,变长数组, 数组循环, 数组转换, 数组常用操作)

    定长数组定义: val ar = new Array[Int](10) val arr = Array("aa", "bb") 定长数组赋值: arr(0) = ...

  2. 基于公共子序列的轨迹聚类(c#)

    前言 如今的世界中,想要研究人们的出行活动,可以利用智能手机或智能手环等个人设备生成的 GPS 数据进行研究.而在众多的研究方向中,出行的热点路线或者说经常出行的路线也比较受欢迎.采用热力图的方式对其 ...

  3. JPG和PNG特性分析及适用范围

    个人博客: http://mcchen.club JPG的特性   ----有损压缩 1.支持摄影图像或写实图像的高级压缩,并且可利用压缩比例控制图像文件大小. 2.有损压缩会使图像数据质量下降,并且 ...

  4. flask 源码解析:上下文(一)

    文章出处  https://www.cnblogs.com/jackchengcc/archive/2018/11/29/10025949.html 一:什么是上下文 每一段程序都有很多外部变量.只有 ...

  5. 为什么不同命名空间的docker容器可以相互通信?

    一.什么是容器网络栈 所谓容器能看见的"网络栈",被隔离在自己的Network Namespace当中 1.网卡(network interface) 2.回环设备(loopbac ...

  6. Bitset改进你的程序质量

    1:Bitset介绍 BitSet 是用于存储二进制位和对二进制进行操作的 Java 数据结构, 此类实现了一个按需增长的位向量.位 set 的每个组件都有一个 boolean 值.用非负的整数将 B ...

  7. Beautiful Soup 4.2.0 文档(一)

    Beautiful Soup 是一个可以从HTML或XML文件中提取数据的Python库.它能够通过你喜欢的转换器实现惯用的文档导航,查找,修改文档的方式.Beautiful Soup会帮你节省数小时 ...

  8. Springboot 系列(十四)迅速启用 HTTPS 加密你的网站

    1. 获取 HTTPS 证书 正常情况下 HTTPS 证书需要从证书授权中心获得,这样获得的证书才具有公信力,也会被各种浏览器客户端所认可.常见的证书品牌如 Symantec,GeoTrustm,Tr ...

  9. PHP会话机制---session的基本使用

    登录网站后,在每个网页都能拿到用户信息 (1) 使用超链接传递用户名,这样太繁琐了,不建议使用 . (2) 使用数据库,每打开一个页面都查询一次用户信息表,这样网页加载速度变慢,用户体验变差. (3) ...

  10. Python开发【第四篇】语句与函数

    语句 statement 语句是由一些表达式组成,通常一条语句可以独立的执行来完成一部分事情,并且形成结果. 多条语句写在一行内要用分号分开 例子: print('hello world') #这是一 ...