慌张的唐同学

Vue进阶（三）插槽slot，并使用slot开发高级分页组件

如果对组件不太了解，可以先阅读笔者的这两篇文章，在对组件有了一定的了解之后，在查看本篇文章：
vue进阶（一），深入了解组件，自定义组件
Vue进阶（二）设计高级组件——自定义通知

注意：本篇文章的重点是使用slot开发一个分页组件，如果希望详细了解Vue中slot的用法，可以查看官网文档，同时，如果您在阅读本文中发现错误或者使用不当的地方，还请您指出修正！

1. 什么是插槽

Vue实现了一套内容分发的API，而元素就是承载分发内容的出口。
使用，我们可以这样写一个组件：
slotTest.vue：

  <div>
    <span>这个组件中使用了slot元素</span>
    <slot></slot>
  </div>

使用slotTest.vue:

    <current-name>
      这个内容将展示在slot的位置
    </current-name>

显示效果：

当组件在渲染时，将会被替换为“这个内容将展示在slot的位置”。插槽内可以包含任何模板代码，包括 HTML，甚至其他自定义组件：

    <current-name>
      <div>这个内容将展示在slot的位置</div>
    </current-name>

显示结果：

如果slotTest的template中没有包含一个元素，那么，在使用slotTest是，任意内容组件起始标签和结束标签之间的任何内容都会被抛弃。

2. 插槽的具体使用

现在有这样的一个组件，其可以显示一些个人信息。
person.vue:

<template>
  <div>
    <span>这个组件中使用了slot元素</span>
    <div>
      firstName:
      <slot name="firstName"></slot>
    </div>
    <div>
      lastName:
      <slot name="lastName" :last_name="lastname"></slot>
    </div>
    <div>
      sex:
      <slot name="sex">男(如果没有使用到这个插槽，那么这就是这个插槽的默认填充)</slot>
    </div>
   <div>
      身高:
      <slot name="height">如果使用了这个插槽，那么这里的内容就无效了</slot>
    </div>
    <div>
      体重:
      <slot name="weight"></slot>
    </div>
    <slot/>
  </div>
</template>

<script>
export default {
  name: "currentName",
  data(){
    return{
      firstName: 'Niall',
      lastname: 'August'
    }
  }
}
</script>

使用person.vue:

<template>
  <div>
    <person>
      <template v-slot:height>180cm</template>
      <template v-slot:[slotName]>{{firstname}}</template>
      <template v-slot:lastName=last>{{last.last_name}}</template>
      <template #weight>90kg</template>
      <template><div>这个内容将展示在default slot的位置</div></template>
    </person>
  </div>
</template>

<script>
import person from "./components/person";
export default {
  name: "Test",
  components: {
    person
  },
  data(){
    return{
      slotName:'firstName',
      firstname: 'Jack'
    }
  }
}
</script>