Vue3 组件之插槽

文章目录

Vue3 组件之插槽

概述

插槽专门用于父组件向子组件传递标签结构。在使用时,一般会在子组件中通过slot来声明占位,在父组件中,通过子组件的标签体向子组件传递标签结构。

插槽主要分3种:

  • 默认插槽。
  • 具名插槽。
  • 默认内容插槽。
  • 作用域插槽。

默认插槽

仅支持使用单个插槽。

主要分2步:

  • 在组件中使用 <slot> 标签表示插槽出口。
  • 在父组件中提供内容。

定义插槽组件 MySlot.vue:

vue 复制代码
<template>
    <h2>默认插槽</h2>
    <!--插槽出口-->
    <slot></slot>
</template>

使用插槽:

vue 复制代码
<MySlot>
    <!--插槽内容-->
    <button>按钮</button>
    <br>
    <input type="text" placeholder="请输入123">
</MySlot>

以上是默认简写形式,完整写法如下:

MySlot.vue:

vue 复制代码
<template>
  <h2>默认插槽</h2>
  <!--插槽出口-->
  <slot name="default"></slot>
</template>

使用插槽:

vue 复制代码
<MySlot v-slot:default>
    <!--插槽内容-->
    <button>按钮</button>
    <br>
    <input type="text" placeholder="请输入123">
</MySlot>

效果:

具名插槽

主要分2步:

  • 在组件中给 <slot> 指定插槽名称,如```。
  • 在父组件中通过 <template> 使用具名插槽,如 <template v-slot:title></template>

定义插槽组件 MyNamedSlot.vue:

vue 复制代码
<template>
  <h2>具名插槽</h2>
  <slot name="title"></slot>
  -----
  <slot name="content"></slot>
</template>

使用插槽:

vue 复制代码
<MyNamedSlot>
    <template v-slot:title>
		<h3>标题</h3>
    </template>
    <template v-slot:content>
		<p>这是一些内容</p>
    </template>
</MyNamedSlot>

效果:

默认内容插槽

在外部没有提供任何内容的情况下,可以为插槽指定默认内容。

定义默认内容插槽 MyDefault.vue:

vue 复制代码
<template>
  <h2>默认内容插槽</h2>
  <slot name="title">
    <h3>默认标题</h3>
  </slot>
  <slot name="content">
    <p>默认内容</p>
  </slot>
</template>

没有提供内容

使用插槽:

vue 复制代码
<MyDefaultSlot>
</MyDefaultSlot>

效果:

有提供内容

使用插槽:

vue 复制代码
<MyDefaultSlot>
    <template v-slot:title>
		<h3>我的标题</h3>
    </template>
    <template v-slot:content>
		<h3>我的内容</h3>
    </template>
</MyDefaultSlot>

效果:

作用域插槽

在某些场景下插槽的内容可能想要同时使用父组件域内和子组件域内的数据。要做到这一点,我们需要一种方法来让子组件在渲染时将一部分数据提供给插槽。

主要分3步:

  • 父组件给插槽提供数据。
  • 子组件的插槽回传数据。
  • 父组件再处理回传数据。

简单使用

定义插槽组件 MyListSlot.vue:

vue 复制代码
<script setup>
defineProps(['list']);
</script>

<template>
  <h2>作用域插槽</h2>
  <ul>
    <li v-for="({name,age},index) in list" :key="item">
      <slot :uname="name" :age="age" :index="index"></slot>
    </li>
  </ul>
</template>

使用作用域插槽:

vue 复制代码
<script setup>
    import MyListSlot from "./components/MyListSlot.vue";
    import {ref} from "vue";
    const userList = ref([{name: "小明", age: 18}, {name: "小白", age: 28}, {name: "小黑", age: 38}]);
</script>

<template>
    <MyListSlot :list="userList">
        <template v-slot="slotProps">
            <p>index: {{ slotProps.index }} ,姓名:{{ slotProps.uname }} ,年龄:{{ slotProps.age }}</p>
    	</template>
    </MyListSlot>
</template>

效果:

使用解构形式

定义插槽组件 MyListSlot.vue:

vue 复制代码
<script setup>
defineProps(['list']);
</script>

<template>
  <h2>作用域插槽</h2>
  <ul>
    <li v-for="(item,index) in list">
      <slot :user="item" :index="index"></slot>
    </li>
  </ul>
</template>

使用插槽:

vue 复制代码
<MyListSlot :list="userList">
    <template v-slot="{user,index}">
		<p>index: {{ index }} ,姓名:{{ user.name }} ,年龄:{{ user.age }}</p>
    </template>
</MyListSlot>
相关推荐
ElasticPDF-新国产PDF编辑器43 分钟前
Vue use pdf.js and Elasticpdf tutorial
vue.js·pdf
Billy Qin2 小时前
Tree - Shaking
前端·javascript·vue.js
月明长歌3 小时前
Vue + Axios + Mock.js 全链路实操:从封装到数据模拟的深度解析
前端·javascript·vue.js·elementui·es6
头顶秃成一缕光3 小时前
若依——基于AI+若依框架的实战项目(实战篇(下))
java·前端·vue.js·elementui·aigc
冴羽yayujs3 小时前
SvelteKit 最新中文文档教程(17)—— 仅服务端模块和快照
前端·javascript·vue.js·前端框架·react
海石3 小时前
vue2升级vue3踩坑——【依赖注入】可能成功了,但【依赖注入】成功了不太可能
前端·vue.js·响应式设计
cypking5 小时前
解决 axios get请求瞎转义问题
vue.js
向阳2565 小时前
SpringBoot+vue前后端分离整合sa-token(无cookie登录态 & 详细的登录流程)
java·vue.js·spring boot·后端·sa-token·springboot·登录流程
艾克马斯奎普特5 小时前
Vue.js 3 渐进式实现之响应式系统——第一节:系列开篇与响应式基本实现
vue.js
梅子酱~5 小时前
Vue 学习随笔系列二十二 —— 表格高度自适应
javascript·vue.js·学习