slot的理解

一. 什么是slot?

在Vue中,slot 是一种用于在组件之间进行内容分发的机制。它允许我们在组件的模板中定义具有特定名称的插槽,并在组件的使用者中填充相应的内容。

二. 使用场景

  1. 通过插槽可以让用户可以拓展组件,去更好地复用组件和对其做定制化处理

  2. 如果父组件在使用到一个复用组件的时候,获取这个组件在不同的地方有少量的更改,如果去重写组件是一件不明智的事情

  3. 通过slot插槽向组件内部指定位置传递内容,完成这个复用组件在不同场景的应用

三.分类

1. 默认插槽

就是该插槽没有名字,父组件在使用的时候,直接在子组件的标签里写入内容就行。

子组件 child.vue

javascript 复制代码
<template>
  <div>
    <slot>父组件想展示的内容写在这里边</slot>
  </div>
</template>

父组件 father.vue

javascript 复制代码
<template>
  <div>
    <Child>
      <p>Custom Content</p>
    </Child>
    <Child></Child>
  </div>
</template>
<script>
	import Child from '../components/child'
	export default {
		name:'Father',
		components:{Child}
	}
</script>

2. 具名插槽

子组件用name属性来表示插槽的名字,不传为默认插槽

子组件 child.vue

javascript 复制代码
<template>
  <form >
    <div class="auth">
	    <slot>插槽后备的内容</slot>
	  	<slot name="content">插槽后备的内容</slot>
    </div>
  </form>
</template>

父组件 father.vue

javascript 复制代码
<child>
    <template v-slot:default></template>
    <template #content></template>
</child>

3. 作用域插槽

子组件 child.vue

javascript 复制代码
<div>
	<!-- 设置默认值:{{person.name}}获取 baijing -->
	<!-- 如果father.vue中给这个插槽值的话,则不显示 baijing -->
	<!-- 设置一个 usertext 然后把person绑到设置的 usertext 上 -->
	<slot v-bind:usertext="person">{{person.name}}</slot>
</div>

//定义内容
data(){
  return{
	person:{
	  name:"baijing",
	  age: 20
	}
  }
}

父组件 father.vue

javascript 复制代码
<div>
  <test v-slot:default="slotProps">
    {{slotProps.usertext.age}}
  </test>
</div>

绑定在 元素上的特性被称为插槽 prop。在父组件中,我们可以用 v-slot 设置一个值来定义我们提供的插槽 prop 的名字,然后直接使用就好了

相关推荐
百锦再1 天前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
一笑code1 天前
vue/微信小程序/h5 实现react的boundary
微信小程序·vue·react
eric*16881 天前
尚硅谷张天禹老师课程配套笔记
前端·vue.js·笔记·vue·尚硅谷·张天禹·尚硅谷张天禹
喜欢敲代码的程序员2 天前
SpringBoot+Mybatis+MySQL+Vue+ElementUI前后端分离版:项目搭建(一)
spring boot·mysql·elementui·vue·mybatis
海的诗篇_2 天前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html
sunbyte2 天前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DragNDrop(拖拽占用组件)
前端·javascript·css·vue.js·vue
skyymrj12 天前
Vue3 + Tailwind CSS 后台管理系统教程
前端·css·vue
程序猿小D12 天前
[附源码+数据库+毕业论文]基于Spring+MyBatis+MySQL+Maven+Vue实现的校园二手交易平台管理系统,推荐!
java·数据库·mysql·spring·vue·毕业设计·校园二手交易平台
伍哥的传说12 天前
react gsap动画库使用详解之text文本动画
前端·vue.js·react.js·前端框架·vue·html5·动画
伍哥的传说12 天前
react gsap动画库使用详解之scroll滑动动画
前端·javascript·vue.js·react.js·前端框架·vue·动画