vue3 基础知识 ( 扩展插槽 )03

嘿!! 💕

文章目录


一、扩展插槽

在开发中,我们会经常封装一个个可复用的组件,前面我们会通过props传递给组件一些数据,让组件来进行展示,但是为了让这个组件具备更强的通用性,我们不能将组件中的内容限制为固定的div、span等等这些元素;,比如某种情况下我们使用组件希望组件显示的是一个按钮,某种情况下我们使用组件希望显示的是一张图片,我们应该让使用者可以决定某一块区域到底存放什么内容。

你看,这几个导航栏组件有点相似,可以分为三个部分,左中右,其中中间内容不一样

定义插槽slot:

  1. 插槽的使用过程其实是抽取共性、保留不同;
  2. 我们会将共同的元素、内容依然在组件内进行封装;
  3. 同时会将不同的元素使用slot作为占位,让外部决定到底显示什么样的元素;

使用slot:

  1. Vue中将 slot 元素作为承载分发内容的出口;
  2. 在封装组件中,使用特殊的元素就可以为封装组件开启一个插槽;
  3. 该插槽插入什么内容取决于父组件如何使用;

二、基本使用

javascript 复制代码
组件  里面有个插槽

<template>
  <div>
    <h2>MySlotCpn开始</h2>
    <slot></slot>
    <h2>MySlotCpn结尾</h2>
  </div>
</template>
javascript 复制代码
使用这个组件

<template>
  <div>
    <my-slot-cpn>
      <!-- 1.普通的内容 -->
      Hello World
      <!-- 2.html元素 -->
      <button>我是按钮</button>
      <!-- 3.组件元素 -->
      <my-button></my-button>
    </my-slot-cpn>
  </div>
</template>

三 、插槽的默认内容

当使用组件时,没插入内容,可以在插槽里自定义默认内容

javascript 复制代码
<template>
  <div>
    <h2>MySlotCpn开始</h2>
    <slot>默认内容</slot>
    <h2>MySlotCpn结尾</h2>
  </div>
</template>
javascript 复制代码
<template>
  <div>
    <my-slot-cpn>
    </my-slot-cpn>
  </div>
</template>

四、具名插槽

  1. 具名插槽顾名思义就是给插槽起一个名字,slot 元素有一个特殊的 attribute:name;
  2. 一个不带 name 的slot,会带有隐含的名字 default;
  3. 可以在一个 template 元素上使用 v-slot 指令,并以 v-slot 的参数的形式提供其名称
javascript 复制代码
<template>
  <div>
    <nav-bar>
      <template v-slot:left>
        <button>左边按钮</button>
      </template>
      <template v-slot:center>
        <h2>中间标题</h2>
      </template>
      <template v-slot:right>
        <i>右边i元素</i>
      </template>
    </nav-bar>
  </div>
</template>
javascript 复制代码
<template>
  <div>
  	<slot name='default'></slot>  //默认无名的是default
    <slot name='right'></slot>
    <slot name='left'></slot>
    <slot name='center'></slot>
  </div>
</template>
  1. 跟 v-on 和 v-bind 一样,v-slot 也有缩写;
  2. 即把参数之前的所有内容 (v-slot:) 替换为字符 #
javascript 复制代码
<template>
  <div>
    <nav-bar>
      <template #left>
        <button>左边按钮</button>
      </template>
      <template #center>
        <h2>中间标题</h2>
      </template>
      <template #right>
        <i>右边i元素</i>
      </template>
    </nav-bar>
  </div>
</template>

动态具名插槽:

  1. 目前我们使用的插槽名称都是固定的;
  2. 比如 v-slot:left、v-slot:center等等;
  3. 我们可以通过 v-slot:[dynamicSlotName]方式动态绑定一个名称;

五、 作用域插槽

有时候我们希望插槽可以访问到子组件中的内容是非常重要的,当一个组件被用来 渲染一个数组元素 时,我们使用插槽,并且希望插槽中 没有显示每项的内容 ,这个Vue给我们提供了 作用域插槽

  1. 在App.vue中定义好数据
  2. 传递给ShowNames组件中
  3. ShowNames组件中遍历names数据
  4. 定义插槽的prop
  5. 通过v-slot:default的方式获取到slot的props
  6. 使用slotProps中的item和index
javascript 复制代码
App.vue代码

<template>
  <div>
    <show-names :names="names">
      <template v-slot:default="slotProps">
        <span>{{slotProps.item}}-{{slotProps.index}}</span>
      </template>
    </show-names>
  </div>
</template>

<script>
  import ShowNames from './ShowNames.vue';

  export default {
    components: {
      ShowNames,
    },
    data() {
      return {
        names: ["why", "kobe", "james", "curry"]
      }
    }
  }
</script>
javascript 复制代码
ShowNames.vue

<template>
  <div>
    <template v-for="(item, index) in names" :key="item">
      <!-- 插槽prop -->
      <slot :item="item" :index="index"></slot>
    </template>
  </div>
</template>

<script>
  export default {
    props: {
      names: {
        type: Array,
        default: () => []
      }
    }
  }
</script>

如果我们的插槽是默认插槽default,那么在使用的时候 v-slot:default="slotProps"可以简写为v-slot="slotProps"

javascript 复制代码
<show-names :names="names">
  <template v-slot="slotProps">
		<span>{{slotProps.item}}-{{slotProps.index}}</span>
  </template>
</show-names>
相关推荐
果粒chenl7 分钟前
React学习(四) --- Redux
javascript·学习·react.js
IT_陈寒16 分钟前
React 性能优化:5个实战技巧让首屏加载提升50%,开发者亲测有效!
前端·人工智能·后端
rising start33 分钟前
前端基础一、HTML5
前端·html·html5
Never_Satisfied42 分钟前
在JavaScript / HTML中,div容器在内容过多时不显示超出的部分
开发语言·javascript·html
鬼谷中妖42 分钟前
JavaScript 循环与对象:深入理解 for、for...in、for...of、不可枚举属性与可迭代对象
前端
大厂码农老A1 小时前
你打的日志,正在拖垮你的系统:从P4小白到P7专家都是怎么打日志的?
java·前端·后端
im_AMBER1 小时前
CSS 01【基础语法学习】
前端·css·笔记·学习
DokiDoki之父1 小时前
前端速通—CSS篇
前端·css
pixle01 小时前
Web大屏适配终极方案:vw/vh + flex + clamp() 完美组合
前端·大屏适配·vw/vh·clamp·终极方案·web大屏
ssf19871 小时前
前后端分离项目前端页面开发远程调试代理解决跨域问题方法
前端