【博学谷学习记录】超强总结,用心分享丨前端开发:Vue插槽

最新推荐文章于 2024-06-05 16:14:30 发布

Fkiki

最新推荐文章于 2024-06-05 16:14:30 发布

阅读量69

点赞数

文章标签： vue.js 学习 javascript

本文链接：https://blog.csdn.net/fkiki/article/details/129204196

版权

Vue插槽

一、默认插槽

父传子: 父传子固然可以完成一定层面的组件文本的定制, 但是自定义性较差, 且无法自定义结构。
如果希望能够自定义组件内部的一些结构 => 就需要用到插槽
插槽基本语法：

组件内用占位
使用组件时夹着的地方, 传入标签替换slot

componentTest.vue

<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

App.vue

<template>
  <div>
    <componentTest>
      <h1>这是插槽里的内容</h1>
    </componentTest>
  </div>
</template>

<script>
import componentTest from './components/componentTest.vue'
export default {
components:{
  componentTest,
}
}
</script>

<style>
h1{
  text-align: center;
}
</style>

效果：
在这里插入图片描述

二、后备内容（默认值）

插槽后备内容：封装组件时，可以为预留的 <slot> 插槽提供后备内容（默认内容）。
语法: 在标签内放置内容, 作为默认显示内容
效果:
外部使用组件时，不传东西，则slot会显示后备内容（slot标签内的结构）
外部使用组件时，传东西了，则slot整体会被换掉

componentTest.vue

<template>
  <div>
    <slot>这是插槽的默认内容</slot>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

App.vue

<template>
  <div>
    <componentTest>
      <!-- <h1>这是插槽里的内容</h1> -->
    </componentTest>
  </div>
</template>

效果：
在这里插入图片描述
App.vue

<template>
  <div>
    <componentTest>
      <h1>这是插槽里的内容</h1> 
    </componentTest>
  </div>
</template>

效果：
在这里插入图片描述

三、具名插槽

插槽的分类:
1 默认插槽(匿名插槽)
<slot></slot> 只要没有具体分发的内容, 都会给到默认插槽
<slot name="default"></slot> 是默认插槽完整的写法和 <slot></slot> 完全等价
2 具名插槽: 具有名字的插槽 (配置了名字), 可以实现定向分发
一旦配置了名字, 只会接收对应的内容, 不是分发给他的, 就不要

语法:

多个slot使用name属性区分名字 <slot name="content"></slot>
template配合v-slot:名字来分发对应标签
v-slot:可以简化成#

具名插槽的使用步骤
(1) 给插槽起名字
(2) 需要使用 template 标签, 将内容包裹成一个整体
(3) 通过 v-slot:插槽名, 指定具体分发给谁

componentTest.vue

<template>
  <div>
    <slot name="title">默认标题</slot>
    <div><slot name="content">默认内容</slot></div>
    <div><slot>默认插槽</slot></div>
    <div><slot name="footer">默认结尾</slot></div>
  </div>
</template>

App.vue

<template>
  <div>
    <componentTest>
      <template #title>
        <h1>这里是标题</h1>
      </template>
      <template #content>
        <h2>这里是内容</h2>
      </template>
      <template #footer>
        <h3>这里是结尾</h3>
      </template>
      <h4>这里是匿名插槽</h4>
    </componentTest>
  </div>
</template>

效果：
在这里插入图片描述

四、作用域插槽

作用域插槽: 定义 slot 插槽的同时, 是可以传值的。给插槽上可以绑定数据，将来使用组件时可以用。
基本使用步骤：

给 slot 标签, 以添加属性的方式传值
所有添加的属性, 都会被收集到一个对象中
在template中, 通过 v-slot:插槽名= "obj" 接收

componentTest.vue

<template>
  <div>
    <slot name="title">默认标题</slot>
    <div><slot name="content" :id="100" :tname="tname">默认内容</slot></div>
    <div><slot>默认插槽</slot></div>
    <div><slot name="footer">默认结尾</slot></div>
  </div>
</template>

<script>
export default {
data(){
  return{
    tname:"xxx"
  }
}
}
</script>

App.vue

<template>
  <div>
    <componentTest>
      <template #title>
        <h1>这里是标题</h1>
      </template>
      <!--对象解构-->
      <template #content="{id,tname}">
        <h2>这里是内容</h2>
        <div>{{id}}:{{tname}}</div>
      </template>
      <template #footer>
        <h3>这里是结尾</h3>
      </template>
      <h4>这里是匿名插槽</h4>
    </componentTest>
  </div>
</template>