深入浅出 Vue 中的插槽 slot

深入浅出 Vue 中的插槽 slot

start

  • 最近被问到好几次 Vue 中的插槽相关知识,掌握的还是有些不全面。
  • 抱着重新学习的心态,写这篇博客。首先对基础知识做一个回顾,然后再对源码实现做一个学习。
  • 作者:番茄
  • 编写时间:2023/11/27

1.什么是插槽?

在日常代码编写的过程中,针对高频出现的业务场景,我会它把封装一个组件,然后多个地方去使用。

但是在某些情况下,一个组件并不能兼容所有的场景。

就比如对话框组件,可能每个人都会用到对话框,但是对话框中的内容会根据需求千变万化。这个时候就要考虑有没有什么方法,可以让我们对话框中的内容变成动态的呢?

答案:有,使用插槽就可以满足我们的需求。

插槽的概念有点类似 JavaScript 中的插值表达式,在代码在保留一个占位符,然后动态的向占位符中传入内容。

// 插值表达式
var name = '番茄'

var str = `
我是 ${name}
`

2. 插槽的使用

上面提到了插槽,现在我们结合示例,一步一步学习插槽的用法

1. 父组件引入子组件的基本用法

父组件 app.vue




子组件 son.vue


运行效果

深入浅出 Vue 中的插槽 slot_第2张图片

总结

在父组件中使用子组件,当子组件中没有插槽没有 的时候,在父组件中向子组件中传递内容,这些内容并不会展示。

3.基础插槽的使用(不传入内容)

父组件 app.vue




子组件 son.vue


运行效果

深入浅出 Vue 中的插槽 slot_第3张图片

总结

上面的示例是一个基础的插槽使用演示。父组件使用子组件,但是不向子组件传入内容,此时,展示的内容是 默认内容 中默认的内容。

4. 基础插槽的使用(传入内容)

父组件 app.vue




子组件 son.vue


运行效果

深入浅出 Vue 中的插槽 slot_第4张图片

总结:

上面的示例是一个基础的插槽使用演示。父组件使用子组件,且向子组件传入内容。

此时,展示的内容是我们在父组件中传入的内容。此时就可以满足我们定制化的需要了。

这就是最基础的组件使用方法了

5. 同一个子组件,需要多个插槽如何处理?

掌握了插槽的基础使用方法后,会有一个衍生的问题。

如果同一个组件中需要多个插槽,如何处理?

答: 可以使用具名插槽,顾名思义,就是可以给插槽取名字,然后根据名称去匹配插槽。

父组件 app.vue

<template>
  <div id="app">
    <Son>
       这是我自己DIY的内容
    <template v-slot:lazy>
      LAZY
    template>

    <template v-slot:tomato>
      TOMATO
    template>
    Son>
  div>
template>

<script>
import Son from "./son.vue";

export default {
  components: {
    Son,
  },
};
script>
<style>
#app {
  width: 400px;
  height: 400px;
  background: pink;
}
style>

子组件 son.vue

<template>
  <div class="son">
    <h1>我是子组件 sonh1>
    <br />

    <slot> 我是什么都不写的插槽 slot>
    <br />

    <slot name="lazy"> 我是lazy slot>
    <br />

    <slot name="tomato"> 我是tomato slot>
    <br />

    <slot> 我是什么都不写222 slot>
    <br />

    <slot name="lazy"> 我是lazy slot>

  div>
template>
<style>
.son {
  background: yellow;
}
style>

运行效果

深入浅出 Vue 中的插槽 slot_第5张图片

总结

由上面的运行效果,我们知道:

  1. 针对一个组件中有多个插槽的情况,我们可以使用 name 对插槽进行命名。然后在父组件中使用插槽的时候,使用