Element-ui 的 slot 关系理解

摘要: 在看一些前端用例时,看到 slot-scope 属性,早在了解学习的时候,对 slot 还是可以理解的,结果碰上 slot-scope 感觉理解方式就不对了,所以重新查阅学习了一下

首先 slot: 父组件写在子组件标签内的内容,替换了子组件中slot标签

//father
<template>
  <div class="father">
    <child>
      <div>标签内的内容</div>      //写在子组件标签内,会替换子组件的slot标签.....这里可以是纯文字,可以是一个小标签,也可以是一个<template>
    </child>
  </div>
<template>

//child
<template>
  <div class="child">
    <slot></slot>      //插槽,子组件预留的空位,由父组件提供内容        
  </div>
<template>

//合成后
<div class="father">  //父组件
  <div class="child">  //子组件
    <div>标签内的内容</div>   //替换了slot
  </div>
</div>

上述内容就是插槽,一种子组件预留空间的方法.也可以准备多个插槽:

//指定要插入的插槽
<div slot="slot1">标签内的内容1</div>
<div slot="slot2">标签内的内容2</div>

//为插槽命名
<slot name="slot1"></slot>
<slot name="slot2"></slot>

slot-scope 相对复杂一点,它是用于数据传递的,意义上就像props

先提供一个场景说明:

老师A需要做一个调查统计分析的报告(A:父组件,报告:展示部分)

留了一页空白让学生B去做表格和统计了(B:子组件,表格统计:展示部分)

要求,在表格最后一行留空,A要写分析结论(留空:插槽,分析结论:标签内的内容)

同时,A还要B提供统计结果才能写结论(统计结果:子组件返回的数据)

//父组件
<template>
  <div class="father">  　　　　　　　　//老师A 报告
    <child>               　　　　　　 //学生B 表格
        <div slot-scope="response" > //老师A 结论
          统计结果:{{response.data}}
        </div>
    </child>
  </div>
</template>

//子组件
<template>
  <div class="child">  　　　　　　　 //学生B 表格
     <slot :data="result"></slot>   //老师A 结论
  </div>
</template>

解释;把slot想象成孙组件,子组件可以任意传数据给孙组件

这里孙组件不用再一一写props,因为子组件slot会把后面所有数据打包成一个对象给孙组件,孙组件用slot-scope为这整个对象起名

<div slot-scope="xxx">
{{xxx.info.name}}的学校是{{xxx.school.name}}
</div>

<slot :info="person" :school="school"></slot>