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>
相关推荐
HED2 小时前
VUE项目发版后用户访问的仍然是旧页面?原因和解决方案都在这啦!
前端·vue.js
清风细雨_林木木3 小时前
Vue开发网站会有“#”原因是前端路由使用了 Hash 模式
前端·vue.js·哈希算法
局外人LZ4 小时前
前端项目搭建集锦:vite、vue、react、antd、vant、ts、sass、eslint、prettier、浏览器扩展,开箱即用,附带项目搭建教程
前端·vue.js·react.js
宝拉不想努力了4 小时前
vue element使用el-table时,切换tab,table表格列项发生错位问题
前端·vue.js·elementui
神仙别闹6 小时前
基于VUE+Node.JS实现(Web)学生组队网站
前端·vue.js·node.js
HuaHua的世界8 小时前
说说 Vue 中 CSS scoped 的原理?
css·vue.js
H5开发新纪元8 小时前
Vue 项目中 Loading 状态管理及页面切换 Bug 分析
前端·vue.js
icefiresong2410 小时前
如何让 Vue 组件自动清理 EventBus 监听器?告别内存泄漏!
vue.js
tjh000112 小时前
vue3+TS 手动实现表格滚动
前端·javascript·vue.js
章若楠圈外男友12 小时前
修改了Element UI中组件的样式,打包后样式丢失
前端·vue.js