最通俗易懂的slot详解

最近有同学问我Element封装的组件中这么多的slot和slot-scope含义是啥
今天就和大家详细解说一下slot

slot作用

总结一句话就是：父组件控制写什么内容，子组件利用slot控制展示在什么位置
父组件中在子组件标签对中写的内容，我们可以在子组件中使用插槽<slot></slot>在子组件的任意位置展示
父组件
我们在子组件标签对中写入以下内容xxxxxx

<template>
  <div>
    <h3>这是父组件</h3>
    <son>xxxxxx</son>
  </div>
</template>

子组件
子组件中这个slot标签对的作用就是将内容xxxxxx放到子组件的这个位置展示

<template>
  <div>
    <h5>这是子组件</h5>
    <!-- 这个slot标签对的作用就是将内容xxxxx放到子组件的这个位置展示 -->
    <slot></slot>
  </div>
</template>

效果如下

image.png

同理具名插槽

父组件中在子组件标签对中写的内容（如使用template）<template slot='myslot'></template> ，那么这个内容只能使用子组件的name='myslot'的插槽进行展示<slot name='myslot'></slot>
父组件中

<template>
  <div>
    <h3>这是父组件</h3>
    <son>
      <template slot="myslot">
        <p>具名插槽的内容</p>
      </template>
    </son>
  </div>
</template>

子组件中

<template>
  <div>
    <h5>这是子组件</h5>
    <slot name="myslot"></slot>
  </div>
</template>

效果

image.png

slot传值

子组件中使用<slot :params='data'></slot>
那么父组件中在子组件的标签对中可以使用
<template slot-scope='scope'></template>
这里scope.params就是我么子组件中传递的数据

子组件中

<template>
  <div>
    <h5>这是子组件</h5>
    <slot name="myslot" :params="{ name: '张三', age: '18' }"></slot>
  </div>
</template>

父组件中

<template>
  <template>
  <div>
    <h3>这是父组件</h3>
    <son>
      <template slot="myslot" slot-scope="scope">
        <p>我是{{ scope.params.name }}我今年{{ scope.params.age }}岁</p>
      </template>
    </son>
  </div>
</template>

效果

image.png