Vue-插槽

为什么需要插槽

组件的插槽是为了让我们封装的组件更具有扩展性，让使用者决定组件内部展示的内容是什么。
有些组件之间有些区别，但是也有很多的共性，如果我们每个都去封装一个组件，这似乎并不合适，但是如果封装成一个组件，也不合理，因为每个组件之间不完全一样，有些差别，所以我们可以用插槽来解决这些问题。
最好的封装方式就是抽取组件中的共性封装起来，将不同的地方定义为插槽暴露出去，这样既可以根据使用的需求，决定插槽内容是什么。
插槽（slot）的作用就是父组件向子组件传递内容：

匿名插槽

匿名插槽是默认插槽，当slot没有指定name属性时的一个默认显示插槽，一个组件内只能有一个匿名插槽

• 首先在子组件child中在需要用户自定义内容的地方放入< slot >标签占位

<template>
  <div>
    <p>我的名字是:<slot></slot></p>
  </div>
</template>

• 在父组件parent中引用子组件，在子组件标签中填入的内容就相当于替换了子组件中的< slot >标签

<template>
  <div>
    <child>Richard</child>
  </div>
</template>

效果如图：

• 如果在子组件的slot标签之间写入数据，则会作为默认数据，当父组件未向slot传值时，显示默认数据

<template>
  <div>
    <p>我的名字是:<slot>Richard666</slot></p>
  </div>
</template>

<template>
  <div>
    <child></child>
  </div>
</template>

具名插槽

更多时候在一个子组件内，有多个数据需要父组件决定，那么就可以使用具名插槽，给每一个插槽定义自己的名字，在父组件中可以指定传入数据

• 给子组件的slot标签增加name属性，属性值为自定义的名称

<template>
<div>
    <p>我的名字是:<slot name='name'></slot></p>
    <p>我的年龄:<slot name='age'></slot></p>
    <p>我的性别:<slot name='sex'></slot></p>
</div>
</template>

• 在父组件中使用具名插槽，需要使用标签，在标签中增加slot属性，属性值就是子组件中对应插槽的名称，在标签中填入的数据就会传递给对应的插槽

<template>
  <div>
    <child>
      <span slot=name>
        Richard
      </span>
      <p slot=age>
        23
      </p>
      <div style='color:blue' slot=sex>
        <span>男</span>
      </div>
    </child>
  </div>
</template>