前言

最近有个需求，需要把一段富文本放入到组件中的一个位置。看到这么简单的需求想都没想直接开干，我就在组件中按照富文本的类型，写好相应的结构，利用props和v-if来接收和判断。在我兴致勃勃提了mr的时候，leader给我私信，你的代码很危险啊👀👀。他说这种情形肯定要用slot呀，要外部决定组件内部结构😅。我立即想到确实如此，就立马复习了一下slot的用法，并作修改。

本文就记录一下slot的用法。

默认插槽(匿名插槽)

父组件

<SlotDemo>
        <h1>A secret makes a woman woman</h1>
</SlotDemo>

子组件

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

具名插槽

有时一个组件里面需要多个插槽，所以就需要一个name来辨别使用的是哪个插槽

父组件

<SlotDemo>
   <template #header>
     <h1>A secret makes a woman woman</h1>
   </template>
   <template #link>
     <h2 v-html="link"></h2>
   </template>
</SlotDemo>

data() {
    return {
      link:'点击<a href="#">这里</a>'
    };
  },

子组件

<div>
  <slot name="header"></slot>
</div>
<hr />
<div>
  <slot name="link"></slot>
</div>

效果

作用域插槽

这个我没实际开发中使用过，我得理解是：

父组件想传进去的结构中需要用到子组件作用域中的变量

子组件：默认显示data中的name,然后把name1暴露出去，变量名为kris;

<div>
  <slot v-bind:kris="name1">{{name}}</slot>
</div>

data() {
  return {
    name: "Chris Wu",
    name1:'Kris Wu'
  };
},

父组件：利用slot-scope接收子组件传出来的变量

<template slot-scope="{kris}">
  Hello {{kris}}
</template>

效果：渲染出子组件data中name1的值

END

没想到一个这么简单的需求都代码review不通过，希望各位小伙伴们以后接到需求时，一定要考虑清除，哪个是最优方案才下手开发😅😅
希望这篇文章可以帮助到有需要的小伙伴们，有问题可以评论或私信我呀🤞🤞

一文教会你vue中的slot（插槽）

前言

默认插槽(匿名插槽)

具名插槽

作用域插槽

END