在Vue中如何理解插槽Slot

布满荆棘的人生 2022-12-12 15:04 131阅读 0赞

前几天因为在练习React 所以耽搁了博客的更新  
这几天又回顾了Vue的各种属性的用法 我发现一个跟  
父子传值差不多的属性 **slot** 插槽属性  
在vue的官方文档中

> solt是对组件的扩展，通过slot插槽向组件内部指定位置传递内容，通过slot可以父子传参

可以利用slot属性进行传递  
**通俗的理解就是**  
就是在组件模板中使用slot定义一个位置  
在通过slot的属性进行匹配  
替换组件模板中的位置

## 我给大家举一个例子 ##

在App.vue 里面引入Slot.vue 子组件

<template>
      <div>
        <router-view />
        
        <Slot>
          <slot>来自父组件的Hello!word</slot>
        </Slot>
      </div>
    </template>
    <script>
    import Slot from "./components/Slot";
    //引入Slot 页面 展示利用插槽slot进行传值
    export default { 
      components: { 
        Slot,
      },
      data() { 
        return { };
      },
    };
    </script>

在Slot.vue中

这是利用匿名插槽来进行传递  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1JpY2tfYW5kX21vZGU_size_16_color_FFFFFF_t_70_pic_center]

## 匿名插槽 ##

可以让组件模块化更清晰，同时复用性更高，不至于，我要一杯茶，我就要定义一个组件，我要一杯牛奶我又定义一个组件，有了插槽，我只需要定义一个杯子，要喝什么由使用的传人决定。

上述代码也叫匿名插槽，就是默认把模板全部渲染到solt中，如果需要指定渲染，就需要使用具名插槽,简单说就是起一个名字，告诉他小红该坐那儿，小明该坐那儿

## 具名插槽 ##

<template>
      <div>
        <router-view />
        <Slot>
            
          
          <slot name="title"></slot>
        </Slot>
      </div>
    </template>
    <script>
    import Slot from "./components/Slot";
    //引入Slot页面 展示利用插槽slot进行传值
    export default { 
      components: { 
        Slot,
      },
      data() { 
        return { };
      },
    };
    </script>

<template>
      <div>
        <slot name="title">来子组件的Hello!word</slot>
        
      </div>
    </template>
    
    <script>
    
    </script>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1JpY2tfYW5kX21vZGU_size_16_color_FFFFFF_t_70_pic_center 1]

> 元素可以用一个特殊的属性 name来配置如何分发内容。多个插槽可以有不同的名字。具名插槽将匹配内容片段中有对应 slot 特性的元素。

**（具名插槽） 组件中有多个命名的slot 插槽时，可以实现父组件对子组件的指定位置显示内容或传参**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1JpY2tfYW5kX21vZGU_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/cf54f9cb2d9e4b0fb22a6a7631525d01.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1JpY2tfYW5kX21vZGU_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/76a9bde53e634453a7c882c579ba7755.png