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>
相关推荐
江城开朗的豌豆5 分钟前
Vue路由传参避坑指南:params和query的那些猫腻
前端·javascript·vue.js
十里青山13 分钟前
超好用的vue图片预览插件更新啦,hevue-img-preview 7.0.0版本正式发布,支持vue2/vue3/移动/pc,增加缩略图、下载、自定义样式等
前端·javascript·vue.js
lichenyang45322 分钟前
css模块化以及rem布局
前端·javascript·css
小熊哥^--^23 分钟前
条件渲染 v-show与v-if
前端
棉花糖超人30 分钟前
【从0-1的CSS】第3篇:盒子模型与弹性布局
前端·css·html
daols887 小时前
vue vxe-table 自适应列宽,根据内容自适应宽度的2种使用方式
vue.js·vxe-table
小小小小宇8 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊8 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习9 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖9 小时前
chrome安装AXURE插件后无效
前端·chrome·axure